React Router 6中如何将嵌套路由抽离为独立组件？

在绝大多数路由系统中，将一组路由重构抽离是常见模式——这么做能降低代码复杂度、减小文件体积，有时还便于对一组路由批量修改；反之，可能会得到一个包含大量依赖的超长文件。查阅React Router文档时发现相关内容待完善：

（TODO: 需要讨论嵌套路由，甚至可能需要单独文档）

现有一个包含患者嵌套路由的DefaultRoutes组件，代码如下：

return (
  <Routes>
    {/*..other routes*/}
    <Route path="/patients" element={
      <RequireAuth>
        <DefaultLayout />
      </RequireAuth>
    }>
      <Route index element={<Patients />} />
      <Route path=":patientId">
        <Route index element={<PatientDetails />} />
        <Route path="edit" element={<EditPatient />} />
      </Route>

      <Route path="new">
        <Route index element={<NewPatient />} />
        <Route path=":clinicId" element={<NewPatient />} />
      </Route>
    </Route>
    {/*..other routes*/}
  </Routes>
);

你可以通过将患者相关路由封装成独立组件的方式完成抽离，具体步骤如下：

1. 创建独立的PatientRoutes组件 #

新建一个单独的文件（比如PatientRoutes.jsx），将原代码中患者相关的路由定义完整迁移进去，组件直接返回这组路由结构：

import { Route } from 'react-router-dom';
// 导入所需的组件和页面（路径根据你的项目结构调整）
import RequireAuth from './RequireAuth';
import DefaultLayout from './DefaultLayout';
import Patients from './Patients';
import PatientDetails from './PatientDetails';
import EditPatient from './EditPatient';
import NewPatient from './NewPatient';

export default function PatientRoutes() {
  return (
    <Route path="/patients" element={
      <RequireAuth>
        <DefaultLayout />
      </RequireAuth>
    }>
      <Route index element={<Patients />} />
      <Route path=":patientId">
        <Route index element={<PatientDetails />} />
        <Route path="edit" element={<EditPatient />} />
      </Route>

      <Route path="new">
        <Route index element={<NewPatient />} />
        <Route path=":clinicId" element={<NewPatient />} />
      </Route>
    </Route>
  );
}

2. 在原路由组件中引入并使用PatientRoutes #

回到原来的DefaultRoutes组件，导入PatientRoutes，然后直接在<Routes>中替换掉原来的患者路由块：

import { Routes, Route } from 'react-router-dom';
import PatientRoutes from './PatientRoutes';
// 其他路由所需的组件导入

export default function DefaultRoutes() {
  return (
    <Routes>
      {/*..other routes*/}
      <PatientRoutes />
      {/*..other routes*/}
    </Routes>
  );
}

补充说明 #

这种抽离方式完全适配React Router的路由机制，抽离后的组件本质上就是返回一组预定义的路由规则，和直接写在原文件中的效果完全一致。后续如果需要对患者路由做批量调整（比如统一修改权限逻辑、变更基础路径），只需在PatientRoutes组件内操作即可，无需改动原路由文件。

内容的提问来源于stack exchange，提问作者Mark Rogers