<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 />} />

我以为这两个代码做的是一样的事情,但发现他们不是.第一个是菜单ROUTE下的嵌套路由,第二个是常规路由. 显然,第二个代码是我希望它做的事情.

第一个,当我go 到

  • "/menu/featured"
  • "/menu/previous"
  • "/menu/favourites"
  • "/menu/:categoryId/:menuId"

他们都给了我Menu分,我不想要.所以我不得不try 第二个代码来实现我想要的.

但它们不是一样的吗?

如果我想用嵌套的路由来实现我想要的,我应该怎么写这段代码?

推荐答案

第一个示例将Menu组件呈现为布局路由.布局路由组件还应为其嵌套的路由呈现Outlet组件,以也呈现其element内容.如果正在渲染105 Menu,那么我怀疑您错过了Outlet.

也就是说,如果您希望使这两个代码片段相同,那么可以将Menu呈现为在"/menu"上呈现的布局路由的索引路由.当布局Route没有传递elementprops 时,默认情况下它只呈现Outlet.

示例:

<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 />} />

Javascript相关问答推荐

如何访问Json返回的ASP.NET Core 6中的导航图像属性

WebRTC关闭navigator. getUserMedia正确

setcallback是什么时候放到macrotask队列上的?

如何从网站www.example.com获取表与Cheerio谷歌应用程序脚本

使用POST请求时,Req.Body为空

覆盖TypeScrip中的Lit-Element子类的属性类型

如何在不影响隐式类型的情况下将类型分配给对象?

NG/Express API路由处理程序停止工作

为什么JPG图像不能在VITE中导入以进行react ?

当我try 将值更改为True时,按钮不会锁定

在SHINY R中的嵌套模块中,不能使用Java代码

从逗号和破折号分隔的给定字符串中查找所有有效的星期几

如何使用Astro优化大图像?

为列表中的项目设置动画

如何通过Axios在GraphQL查询中发送数组

在HTML5画布上下文中使用putImageData时,重载解析失败

在ChartJS中使用spanGaps时,是否获取空值的坐标?

Refine.dev从不同的表取多条记录

验证Java脚本函数中的两个变量

响应,Use Callback更新状态变量,该变量也存在于其依赖数组中,它如何防止无限重新呈现?