时间戳

首页 > 解决方案 > React Router v6 - 没有 Outlet 的嵌套路由

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

问题描述

我正在使用 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 组件不呈现。

标签： reactjsreact-routerreact-router-dom

解决方案

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

推荐阅读