React Router v6 - 没有 Outlet 的嵌套路由

Question

我正在使用react-router v6，是否可以在不使用Outlet组件的情况下使用嵌套路由？

例如：我有一个用户页面和 onClick 用户组件，它应该导航到特定的用户页面，

当前尝试：

 <Routes>
   <Route path="/" element={<Home />} />
   <Route path="/users" element={<Users />} />
     <Route path=":id" element={<UserPage/>} />
 </Routes>

然后单击特定用户：

const gotoUserPage = () => {
  navigate('1')
}

gotoUserPage 将 URL 从“/users”更改为“/users/1”，但 userPage 组件不会呈现。

Answer 1

是否可以在不使用 Outlet 组件的情况下使用嵌套路由？

不，需要一个 Outlet组件才能呈现嵌套Route组件。

组件Users必须渲染Outlet组件，或者您可以直接渲染Outlet为布局组件。

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/users" element={<Outlet />}>
    <Route index element={<Users />} />        // "/users"
    <Route path=":id" element={<UserPage/>} /> // "/users/:id"
  </Route>
</Routes>

不过，更好或更准确的问题可能是，您是否需要显式地将 an 渲染Outlet为布局元素？令人惊讶的是，答案可能是“不”。组件默认在prop 上Route渲染一个。Outletelement

默认值<Route element>是一个<Outlet>. 这意味着即使没有显式的 element prop，路由仍然会渲染其子级，因此您可以嵌套路由路径，而无需在子路由元素周围嵌套 UI。

你可以简单地将一些嵌套路由包裹在 a 中Route，并只指定for 嵌套，嵌套路由将默认path渲染到 an 中。Outlet

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/users">
    <Route index element={<Users />} />        // "/users"
    <Route path=":id" element={<UserPage/>} /> // "/users/:id"
  </Route>
</Routes>

Answer 2

使用组件有什么问题<Outlet/>？它告诉 React Router 在哪里渲染<UserPage/>，所以如果没有它，页面就没有地方渲染，正如预期的那样。

如果您想知道如何在不成为页面子页面的情况下呈现页面<Users/>，那么您可以尝试以下操作：

<Routes>
   <Route path="/" element={<Home />} />
   <Route path="users" element={<Outlet />} />
     <Route path="/" element={<Users />} />
     <Route path=":id" element={<UserPage />} />
 </Routes>

有时确实需要一个完全不同的组件，但在大多数情况下，组件共享某些组件，例如导航栏和容器。如果 Users 和 UserPage 组件中都有导航栏，那么您可能需要考虑将其重构，并将其与导航栏和 Outlet 一起放入父组件中。这将有助于在扩展时管理组件。