如何用react-router-dom@v6在React父布局内实现嵌套布局？

核心思路 #

利用React Router的**嵌套路由（Nested Routes）**特性，将ActivityDashboardLayout作为/admin-dashboard的父路由组件，复用现有导航栏，子路由内容通过<Outlet />渲染到导航栏与侧边栏之间的指定区域。

1. 编写ActivityDashboardLayout组件 #

这个布局要包含三个核心部分：复用的导航栏、专属侧边栏，以及用于渲染子路由的<Outlet />（来自react-router-dom）。直接拿PrivateLayout里的导航栏组件来用即可。

import { Outlet } from 'react-router-dom';
// 导入你PrivateLayout里的共用导航栏组件
import SharedNavbar from './components/SharedNavbar';
// 导入你的侧边栏组件
import AdminSidebar from './components/AdminSidebar';

const ActivityDashboardLayout = () => {
  return (
    <div className="admin-dashboard-container">
      {/* 共用导航栏 */}
      <SharedNavbar />
      <div className="layout-body">
        {/* 侧边栏 */}
        <AdminSidebar />
        {/* 子路由内容渲染区——对应导航栏和侧边栏之间的区域 */}
        <main className="content-panel">
          <Outlet />
        </main>
      </div>
    </div>
  );
};

export default ActivityDashboardLayout;

2. 修改ProtectedRoutes路由配置 #

在现有的ProtectedRoutes数组中，添加/admin-dashboard的父路由项，并在其children字段下配置子路由（比如/alert）。如果你的PrivateLayout包含权限校验、全局样式等基础逻辑，记得把ActivityDashboardLayout嵌套在PrivateLayout内部，保留原有功能。

假设你原有的ProtectedRoutes结构如下，直接添加新路由即可：

const ProtectedRoutes = [
  // 原有的路由项示例
  {
    path: '/profile',
    element: <PrivateLayout><Profile /></PrivateLayout>,
  },
  // 新增/admin-dashboard嵌套路由
  {
    path: '/admin-dashboard',
    // 嵌套PrivateLayout保留原有权限和基础布局
    element: <PrivateLayout><ActivityDashboardLayout /></PrivateLayout>,
    // 子路由配置
    children: [
      // 访问/admin-dashboard时默认显示的内容
      {
        index: true,
        element: <DashboardHome />,
      },
      // /admin-dashboard/alert 路由
      {
        path: 'alert',
        element: <AlertPage />,
      },
      // 可继续添加其他子路由
      {
        path: 'settings',
        element: <AdminSettings />,
      },
    ],
  },
];

3. 确保路由渲染支持嵌套 #

如果是用useRoutes渲染路由，直接传入修改后的ProtectedRoutes即可：

import { useRoutes } from 'react-router-dom';
import ProtectedRoutes from './ProtectedRoutes';

const AppRouter = () => {
  return useRoutes(ProtectedRoutes);
};

如果是用Routes/Route组件写法，按嵌套结构编写：

import { Routes, Route } from 'react-router-dom';

const AppRouter = () => {
  return (
    <Routes>
      <Route path="/profile" element={<PrivateLayout><Profile /></PrivateLayout>} />
      {/* 嵌套路由写法 */}
      <Route path="/admin-dashboard" element={<PrivateLayout><ActivityDashboardLayout /></PrivateLayout>}>
        <Route index element={<DashboardHome />} />
        <Route path="alert" element={<AlertPage />} />
        <Route path="settings" element={<AdminSettings />} />
      </Route>
    </Routes>
  );
};

4. 样式适配（按需调整） #

根据你的布局图，给容器添加CSS样式确保布局符合预期，比如用Flexbox实现侧边栏与内容区的横向排列：

.admin-dashboard-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout-body {
  display: flex;
  flex: 1;
}

.admin-sidebar {
  width: 240px;
  background-color: #f8f9fa;
}

.content-panel {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

内容的提问来源于stack exchange，提问作者Muhammad Umar