如何在react-router-dom@6中配置带布局的路由结构

你可以通过拆分顶级路由与带布局的嵌套路由来实现需求，不需要额外添加/app路径。核心思路是将不需要布局的页面设为顶级路由，需要RootLayout的页面作为嵌套路由挂在布局组件下。

完整路由配置示例 #

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Login from './pages/Login';
import ForgetPassword from './pages/ForgetPassword';
import RootLayout from './layouts/RootLayout';
import Dashboard from './pages/Dashboard';
import Orders from './pages/Orders';

const router = createBrowserRouter([
  // 无RootLayout包裹的独立页面
  {
    path: '/',
    element: <Login />,
  },
  {
    path: '/forget-password',
    element: <ForgetPassword />,
  },
  // 挂载RootLayout的路由组，子页面自动继承布局
  {
    element: <RootLayout />,
    children: [
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/orders', element: <Orders /> },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

RootLayout 组件需包含 Outlet #

确保你的RootLayout组件中使用Outlet来渲染子页面内容，这是React Router v6嵌套路由的核心：

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

function RootLayout() {
  return (
    <div className="wrapper-container">
      {/* 这里放布局公共部分，比如导航栏、侧边栏 */}
      <nav>全局导航</nav>
      <aside>侧边菜单</aside>
      {/* Outlet 是子页面的渲染容器 */}
      <div className="content-area">
        <Outlet />
      </div>
    </div>
  );
}

export default RootLayout;

说明 #

• 访问/或/forget-password时，直接渲染对应页面组件，不会加载RootLayout。
• 访问/dashboard或/orders时，React Router会先渲染RootLayout，再将对应页面组件插入到RootLayout的Outlet位置，自动实现布局包裹。

内容的提问来源于stack exchange，提问作者margherita pizza