React Router创建BrowserRouter嵌套路径未显示。

Question

我有以下代码

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage></HomePage>,
  },
  {
    path: "login",
    element: <LoginPage></LoginPage>,
    children: [
      { path: "store", element: <StoreLoginPage /> },
      { path: "master", element: <ClientLoginPage /> },
    ],
  },
  {
    path: "Dashboard",
    element: <DashboardPage />,
  },
]);

"/login/store"和"/login/master"这两个路径都呈现出<LoginPage/>，但它们只应该映射到路径"/login"。我无法弄清楚为什么这不起作用。文档中说嵌套路径应该在children数组中。

- IamAAARIANME

Answer 1

虽然嵌套路由是作为父路由的子级来指定的，但路由元素只能通过父路由元素渲染的Outlet组件进行渲染。在这种情况下，布局路由LoginPage组件应该渲染一个Outlet，以便嵌套路由可以将其内容渲染到其中。

例如：

import { ..., Outlet } from 'react-router-dom';

const Login = () => {
  ...

  return (
    ...
    <Outlet /> // <-- nested route render content here
    ...
  );
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
  },
  {
    path: "login",
    element: <LoginPage />,
    children: [
      { path: "store", element: <StoreLoginPage /> },
      { path: "master", element: <ClientLoginPage /> },
    ],
  },
  {
    path: "Dashboard",
    element: <DashboardPage />,
  },
]);

更多细节请参见布局路由和输出口。

- Drew Reese