在最新的React Router中，在单独的组件中嵌套路由的最佳实践是什么？

Question

绝大多数路由系统中的常见模式是允许重构路由组，以降低复杂性和文件大小（有时还可以轻松地在一组路由中应用更改）。 否则，您最终可能会得到一个带有大量依赖项的超长文件。

当我查看 React Router 文档以查看他们对此的说法时，我看到：

（TODO：需要讨论嵌套，甚至可能是一个单独的文档）

• （https://reactrouter.com/en/main/route/route#children）。

假设我有一个 DefaultRoutes 组件，它使用

<Routes>

组件和一些

<Route>

子组件以及一组患者路线：

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>
);

我如何将我的患者路线重构为单独的组件（

<PatientRoutes

）或其他组件，这样它们至少不在同一个文件中？

Answer 1

这里有一个官方文档页面讨论如何管理嵌套路由：

https://reactrouter.com/en/main/start/overview#nested-routes

您可能还对

Outlet

组件感兴趣（取决于您在做什么），它允许您在特定位置渲染子路由的路由决策。

https://reactrouter.com/en/main/components/outlet#outlet