如何用React Router实现带公共组件与独立页面的路由配置

报错原因说明 #

你遇到的报错是因为React Router v6强制要求<Route>必须作为<Routes>组件的直接子元素，或嵌套在其他<Route>的children属性中，不能单独渲染<Route>标签。

最优实现方案 #

我们可以通过**布局路由（Layout Route）**拆分公共组件与页面内容，既满足登录页独立无公共组件的需求，又能让其他页面复用Navbar和Sidebar，同时完全符合React Router v6的规范。

1. 创建带公共组件的布局组件 #

先写一个MainLayout组件，包裹Navbar、Sidebar和页面内容出口：

// components/MainLayout.jsx
import { Outlet } from 'react-router-dom';
import Navbar from './Navbar';
import Sidebar from './Sidebar';

const MainLayout = () => {
  return (
    <div className="app-container">
      <Navbar />
      <div className="content-wrapper">
        <Sidebar />
        <main className="page-content">
          {/* 渲染当前布局下匹配的子路由组件 */}
          <Outlet />
        </main>
      </div>
    </div>
  );
};

export default MainLayout;

<Outlet>是React Router v6提供的核心组件，专门用来承载布局路由下的子页面内容。

2. 在App.js中配置路由 #

将登录页设为独立路由，其他页面嵌套在MainLayout对应的父路由下：

// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MainLayout from './components/MainLayout';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';
import Profile from './pages/Profile';

function App() {
  return (
    <Router>
      <Routes>
        {/* 独立登录页路由，无公共组件 */}
        <Route path="/login" element={<Login />} />
        
        {/* 带公共组件的布局路由，嵌套子路由 */}
        <Route path="/" element={<MainLayout />}>
          {/* 根路径默认渲染Dashboard */}
          <Route index element={<Dashboard />} />
          {/* 其他带公共组件的页面 */}
          <Route path="settings" element={<Settings />} />
          <Route path="profile" element={<Profile />} />
        </Route>

        {/* 可选：404页面 */}
        <Route path="*" element={<div>404 页面未找到</div>} />
      </Routes>
    </Router>
  );
}

export default App;

3. 关键细节说明 #

• 布局路由的作用：MainLayout对应的父路由不设index属性，仅作为容器，其下所有子路由都会自动继承Navbar和Sidebar。
• 登录页独立性：登录页路由直接挂载在<Routes>下，不嵌套在布局路由中，因此不会渲染任何公共组件。
• 路径简化：子路由使用相对路径（如settings对应/settings），React Router v6会自动拼接父路由的路径，无需手动写全路径。
• 默认页面：<Route index>用于设置布局路由的默认页面，访问根路径/时会自动渲染Dashboard。

4. 页面跳转示例 #

使用useNavigate钩子跳转页面时，直接传入对应路径即可：

import { useNavigate } from 'react-router-dom';

const SomeComponent = () => {
  const navigate = useNavigate();

  // 跳转到登录页
  const goToLogin = () => navigate('/login');
  // 跳转到Dashboard
  const goToDashboard = () => navigate('/');
  // 跳转到设置页
  const goToSettings = () => navigate('/settings');

  return <div>{/* 组件内容 */}</div>;
};

这种方案既解决了报错问题，又实现了路由逻辑的清晰拆分，是React Router v6下处理公共组件复用与独立页面的标准实践。

内容的提问来源于stack exchange，提问作者Stanley Omeje