如何在ReactJS中配置嵌套路由与嵌套组件以搭建Admin-UI Dashboard

以下基于目前主流的react-router-dom v6版本实现，全程无需页面跳转，仅在布局容器内切换对应业务组件：

1. 安装依赖 #

npm install react-router-dom
# 或使用yarn
yarn add react-router-dom

2. 推荐项目目录结构 #

• src/
  • pages/
    • Dashboard.jsx（首页控制面板）
    • UserManage.jsx（用户管理页）
    • OrderManage.jsx（订单管理页）
    • Setting.jsx（系统设置页）
  • layout/
    • AdminLayout.jsx（全局布局，包含侧边栏、顶部导航、内容渲染区）
  • router/
    • index.js（路由配置文件）
  • App.jsx
  • main.jsx

3. 配置嵌套路由规则 #

在src/router/index.js中配置路由，父路由绑定布局组件，子路由对应各业务页面：

import { createBrowserRouter } from 'react-router-dom'
import AdminLayout from '../layout/AdminLayout'
import Dashboard from '../pages/Dashboard'
import UserManage from '../pages/UserManage'
import OrderManage from '../pages/OrderManage'
import Setting from '../pages/Setting'

export const router = createBrowserRouter([
  {
    path: '/',
    element: <AdminLayout />,
    // 嵌套子路由，对应侧边栏各选项的组件
    children: [
      { index: true, element: <Dashboard /> }, // 根路径默认展示首页面板
      { path: 'users', element: <UserManage /> },
      { path: 'orders', element: <OrderManage /> },
      { path: 'setting', element: <Setting /> },
    ]
  }
])

4. 实现布局组件AdminLayout #

布局组件包含侧边导航栏，以及用来渲染子路由组件的Outlet容器，点击侧边栏切换路由时，仅Outlet区域内容更新：

import { Outlet, NavLink } from 'react-router-dom'
import './AdminLayout.css' // 自行编写布局样式，侧边栏固定、内容区自适应即可

export default function AdminLayout() {
  return (
    <div className="admin-container">
      {/* 侧边导航栏 */}
      <aside className="sidenav">
        <h2>Admin Dashboard</h2>
        <div className="nav-list">
          {/* NavLink激活时会自动添加active类名，可自定义选中样式 */}
          <NavLink to="/" end>控制面板</NavLink>
          <NavLink to="/users">用户管理</NavLink>
          <NavLink to="/orders">订单管理</NavLink>
          <NavLink to="/setting">系统设置</NavLink>
        </div>
      </aside>
      {/* 右侧内容区 */}
      <main className="main-content">
        {/* 子路由组件的渲染位置 */}
        <Outlet />
      </main>
    </div>
  )
}

5. 入口文件挂载路由 #

在main.jsx中引入路由配置完成挂载：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import { router } from './router'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

补充说明 #

• NavLink的end属性用于保证只有完全匹配根路径时才激活首页的选中状态，避免子路由误触发首页样式
• 如果需要二级嵌套导航，只需在对应子路由下新增children配置，同时在对应的父页面组件内新增一个Outlet即可
• 所有路由切换仅会替换Outlet的内容，侧边栏、顶部导航等公共布局完全不会刷新，符合同页加载需求

内容的提问来源于stack exchange，提问作者Fahim Rayhan