相同的路径 React Router Dom v6 和每个路径中的不同出口

Question

我想要不同的导航路线，但不知道如何操作 这是我尝试过的

const router = createBrowserRouter(
 createRoutesFromElements(
  <>
    <Route path="/" element={<NavBar />}>
      <Route path="/" element={<LogIn />} />
      <Route path="/sign-up" element={<Signup />} />
    </Route>
    <Route path="/" element={<RootLayout />}>
      <Route path="/" element={<HomePage />} />
    </Route>
  </>
))

Answer 1

在单个路由/路由器配置中，您无法为每个要匹配的 URL 路径呈现多个路由。

似乎您基本上想要根据某些用户“身份验证状态”有条件地渲染

NavBar

、

Login

和

HomePage

组件。为此，我建议创建一个受保护的路线组件并执行此条件渲染，将

Login

组件移动到其自己的路线。

示例：

const ProtectedRoute = () => {
  const isAuthenticated = /* auth context/state/etc */

  return isAuthenticated
    ? <Outlet />
    : <Navigate to="/login" replace />;
};

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route element={<RootLayout />}>
        <Route element={<ProtectedRoute />}>
          <Route path="/" element={<HomePage />} />
        </Route>
      </Route>
      <Route element={<NavBar />}>
        <Route path="/login" element={<LogIn />} />
        <Route path="/sign-up" element={<Signup />} />
      </Route>
    </>
  ),
);