react router dom 嵌套路由

Question

<Route path="/menu" element={<Menu />}>
  <Route path="featured" element={<Featured />} />
  <Route path="previous" element={<Previous />} />
  <Route path="favourites" element={<Favourites />} />
  <Route path=":categoryId/:menuId" element={<MenuDetail />} />
</Route>

<Route path="/menu" element={<Menu />} />
<Route path="/menu/featured" element={<Featured />} />
<Route path="/menu/previous" element={<Previous />} />
<Route path="/menu/favourites" element={<Favourites />} />
<Route path="/menu/:categoryId/:menuId" element={<MenuDetail />} />

我以为这两个代码做同样的事情，但发现它们不是。第一个是菜单路由下的嵌套路由，第二个只是常规路由。 显然第二个代码就是我想要的。

第一个，当我去的时候

• "/menu/featured"

• "/menu/previous"

• "/menu/favourites"

• "/menu/:categoryId/:menuId"

他们都给了我

Menu

组件，这是我不想要的。所以我不得不尝试第二个代码来实现我想要的。

但是它们不是一样吗？

如果我要使用嵌套路由来实现我想要的目标，我应该如何编写这段代码？

Answer 1

第一个示例

Menu

组件被渲染为布局路线。布局路由组件还应该为其嵌套路由渲染一个

Outlet

组件，以渲染其

element

内容。如果仅渲染

Menu

，那么我怀疑您错过了

Outlet

。

也就是说，如果您想让两个片段相同，那么您可以将

Menu

渲染为

"/menu"

上渲染的布局路线的索引路线。

示例：

<Route path="/menu">
  <Route index element={<Menu />} />
  <Route path="featured" element={<Featured />} />
  <Route path="previous" element={<Previous />} />
  <Route path="favourites" element={<Favourites />} />
  <Route path=":categoryId/:menuId" element={<MenuDetail />} />
</Route>

这相当于将它们全部单独渲染为完全合格的路由路径。

<Route path="/menu" element={<Menu />} />
<Route path="/menu/featured" element={<Featured />} />
<Route path="/menu/previous" element={<Previous />} />
<Route path="/menu/favourites" element={<Favourites />} />
<Route path="/menu/:categoryId/:menuId" element={<MenuDetail />} />