嵌套路由在 React Router v6 中不起作用

Question

我正在尝试反应路由器 v6。根据反应培训博客，我创建了路由对象并传递给useRoutes()：

function SomeOtherElement() {
  return <h1>add user</h1>;
}

const routes = [
  {
    path: 'app',
    element: <DashboardLayout />,
    children: [
      { path: 'account', element: <AccountView /> },
      {
        path: 'users', element: <UserListView />, 
        children: [
          { path: 'add', element: <SomeOtherElement /> }
        ]
      },
      { path: 'dashboard', element: <DashboardView /> },
      { path: 'products', element: <ProductListView /> },
      { path: 'settings', element: <SettingsView /> },
      { path: '*', element: <Navigate to="/404" /> }
    ]
  }];

const routing = useRoutes(routes);

但嵌套路由不起作用。正如您在上面的对象中看到的，我想创建 URL 并为用户“添加”功能呈现 UI。

浏览器中的 URL 已正确更新为http://localhost:3000/app/users/add但 UI 未更新。

Answer 1

React Router 的默认行为无法使用单个 Outlet 渲染多个子路由。例如 - 当需要在所有页面中都有一个 Header 并根据 Route 替换公共内容（Single Outlet）时。

这里的技巧是不为父级提供任何元素属性，而是借助Index属性将此组件作为子路由提供。

如果子路由与任何子路由都不匹配，索引可以帮助我们为父路由提供默认组件。

其代码片段与 Samira 提供的代码片段类似。

<BrowserRouter>
  <Routes>
    <Route path="/" element={<App />}>
      <Route path="" element={<Home />}></Route>
      <Route path="child1"> //no element attribute here
        <Route index={true} element={<Child1 />}></Route>
        <Route path="grandChild1" element={<GrandChild1 />}></Route>
        <Route path="grandChild2" element={<GrandChild2 />}></Route>
      </Route>
    </Route>
  </Routes>
</BrowserRouter>

Answer 2

正如这里所解释的，您需要使用一个<Outlet />元素作为子嵌套路由的占位符。

例子：

import { Outlet } from 'react-router-dom'

// ... 

const routes = [
  {
    path: "app",
    element: (
      <>
        <DashboardLayout />
        <Outlet />
      </>
    ),
    children: [
      { path: "account", element: <AccountView /> },
      {
        path: "users",
        element: (
          <>
            <UserListView />
            <Outlet />
          </>
        ),
        children: [{ path: "add", element: <SomeOtherElement /> }],
      },
      { path: "dashboard", element: <DashboardView /> },
    ],
  },
];

或者您可能希望Outlet在父组件中包含：

export default function DashboardLayout() {
  return (
    <>
      <h1>I am Dashboard Layout</h1>
      <Outlet />
    </>
  );
}

Answer 3

这对我来说是一个有用的例子，因为我想使用嵌套路由，但我不想使用 Outlet，所以我找到了它：

注意你可以制作一条动态路线path=":teamId"

<BrowserRouter>
        <Routes>
          <Route path="/">
            <Route index={true} element={<Home />} />
          </Route>
          <Route path="/teams">
            <Route index={true} element={<ParentTeam />} />
            <Route index={false} path=":teamId" element={<Team />} />
            <Route index={false} path="new" element={<NewTeamForm />} />
          </Route>
          <Route path="*" element={<Home />} />
        </Routes>
   </BrowserRouter>

链接到codeSandBox