如何在React Router 6中使用嵌套子路由简化重复路径配置

你可以通过嵌套路由提取公共路径，避免重复编写前缀。核心是利用React Router 6的<Outlet />组件作为子路由的渲染出口，同时将子路由定义在父路由的children属性中。

重构后的代码示例 #

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

// React组件名需首字母大写，修正命名规范
function Home() { /* 你的组件逻辑 */ }
function StudentInfo() { /* 你的组件逻辑 */ }
function StudentAbout() { /* 你的组件逻辑 */ }
function TeacherScore() { /* 你的组件逻辑 */ }
function TeacherAttendence() { /* 你的组件逻辑 */ }

// 封装学生模块公共布局（可选，用于复用导航、侧边栏等UI）
function StudentLayout() {
  return (
    <div>
      {/* 这里可添加学生模块的公共元素 */}
      <Outlet /> {/* 子路由内容会渲染在此处 */}
    </div>
  );
}

// 封装教师模块公共布局
function TeacherLayout() {
  return (
    <div>
      {/* 这里可添加教师模块的公共元素 */}
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 学生模块公共路由 */}
        <Route path="/home/student" element={<StudentLayout />}>
          {/* 子路由使用相对路径，自动拼接父路由前缀 */}
          <Route path="info" element={<StudentInfo />} />
          <Route path="about" element={<StudentAbout />} />
        </Route>
        {/* 教师模块公共路由 */}
        <Route path="/home/teacher" element={<TeacherLayout />}>
          <Route path="score" element={<TeacherScore />} />
          <Route path="attendence" element={<TeacherAttendence />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

关键说明 #

• <Outlet />：父路由的element中必须添加该组件，它是子路由内容的“占位容器”，子路由的组件会在这里渲染。
• 相对路径：子路由的path无需写完整前缀，React Router会自动将父路由路径与子路由路径拼接（比如/home/student + info = /home/student/info）。
• 布局复用：通过StudentLayout、TeacherLayout可以抽离模块的公共UI，避免重复编写相同的导航、侧边栏等代码。
• 命名规范：React组件名必须首字母大写，所以修正了你原代码中about、score这类小写开头的组件名。

如果不需要单独的布局组件，也可以直接在父路由的element中使用<Outlet />：

<Route path="/home/student" element={<Outlet />}>
  <Route path="info" element={<StudentInfo />} />
  <Route path="about" element={<StudentAbout />} />
</Route>

内容的提问来源于stack exchange，提问作者ganesh kaspate