如何在react-router-dom v6中为所有的子路由使用一条路由?

Question

我有route ，如何在所有路由中使用此路由:/main:page，/main/post:id。例如，当我访问/main/post:id时，我希望在同一页面上看到PostCurrent组件和SignIn组件。我想我的问题解释得没错。我使用的是react-router的v6版本。

   <Routes>
    <Route path="/main" element={<Main />}>
      <Route path=":page" element={<><PostList /><Pagination /></>} />
      <Route path="post/:id" element={<PostCurrent />} />
      <Route path="login" element={<SignIn />} />
    </Route>
    <Route element={<ProtectedRoute />}>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="post-form" element={<PostForm />} />
        <Route path="post-list" element={<PostListDashBoard />} />
      </Route>
    </Route>
    <Route path="*" element={<Navigate to="/main/0" replace />} />
  </Routes>

Answer 1

如果您想在"/:page"和"/post/:id"路由上同时渲染SignIn组件，那么创建一个布局路由来渲染SignIn，并为嵌套的Route组件创建一个Outlet。

的例子:

import { Outlet } from 'react-router-dom';
const MainLayout = () => (
  <>
    <Outlet />
    <SignIn />
  </>
);

…

<Routes>
  <Route path="/main" element={<Main />}>
    // Layout route rendering Signin w/ nested routes
    <Route element={<MainLayout />}>
      <Route
        path=":page"
        element={<><PostList /><Pagination /></>}
      />
      <Route path="post/:id" element={<PostCurrent />} />
    </Route>
    <Route path="login" element={<SignIn />} />
  </Route>
  <Route element={<ProtectedRoute />}>
    <Route path="/dashboard" element={<Dashboard />}>
      <Route path="post-form" element={<PostForm />} />
      <Route path="post-list" element={<PostListDashBoard />} />
    </Route>
  </Route>
  <Route path="*" element={<Navigate to="/main/0" replace />} />
</Routes>