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

【问题标题】：React Router v6 - nested routing without OutletReact Router v6 - 没有 Outlet 的嵌套路由
【发布时间】：2020-11-18 09:27:10
【问题描述】：

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

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

当前尝试：

 <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 组件不呈现。

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

使用<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 的父组件中。这将有助于在您扩展时管理组件。

【讨论】：

} /> 抛出错误，因为嵌套路由不能是绝对路径。（以 / 开头）还有其他选择吗？
@AdarshChakraborty 使用索引路由代替<Route index element={<Users />} />。 reactrouterdotcom.fly.dev/docs/en/v6/getting-started/…
如果省略路径属性，上述工作：<Route element={<Users />} />

【解决方案2】：

可以在不使用<Outlet /> 组件的情况下使用嵌套路由，您只需要做的如下所示。使用父组件相同的路径并添加:id：

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

但是，如果您担心<Outlet /> 组件在嵌套时会与父组件在同一页面上呈现，那么您可以在子组件处于活动状态时隐藏父组件，如下所示：

1.嵌套路由

将<UserPage /> 组件嵌套在<Users /> 组件中，如下所示：

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

2。父组件条件渲染

如果存在params.id 属性，则添加条件以不呈现父组件的内容

let params = useParams();
<div>
!params.id && (<div>
*render your contents here* </div>)
<Outlet />
</div>

所以每当加载子组件时，父组件是不可见的。

【讨论】：

【解决方案3】：

是否可以在不使用 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>

不过，一个更好或更准确的问题可能是，您是否甚至需要将Outlet 显式呈现为布局元素？答案可能出人意料地是“不”。 Route 组件默认在 element 属性上呈现 Outlet。

默认的<Route element> 是<Outlet>。这意味着路线即使没有明确的元素道具，它仍然会渲染它的孩子，因此您可以嵌套路由路径，而无需在子路由周围嵌套 UI 元素。

您可以简单地将一些嵌套路由包装在Route 中，并仅指定path 进行嵌套，嵌套路由默认会呈现为Outlet。

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

【讨论】：

【解决方案4】：

这是@hellocng 解释的优化方式：

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

【讨论】：