嵌套路径在id下

Question

有没有一种方法可以用这种方式使用react路由器v6来嵌套路由呢？

<Parent>
  <Routes>
    <Route path="/items/:itemId" element={<ItemPage />} />
  </Routes>
</Parent>

<ItemPage>
  <Routes>
    <Route path="info" element={<ItemInfo />} />
    <Route path="settings" element={<ItemSettings />} />
  </Routes>

  <Sidebar />
</ItemPage>

这样我才能去拜访/items/123/settings？我确实在寻找与路由器一起工作的这种方式，因此在单独的ItemPage组件布局上将取决于子路由，保持Sidebar在一边，但是根据所选的info/设置“选项卡”更改内容。我的应用程序中的其他地方都是这样工作的，但由于某种原因，它不适用于:id下的嵌套路由。

这个文档展示了一个类似嵌套路由的例子，但它不是嵌套的。

Answer 1

是的，父Routes组件中的路由需要将*通配符附加到路由中，以便嵌套路由也可以匹配。嵌套Routes组件构建相对路由。

请参阅我如何在树的深处筑巢？

示例：

<Parent>
  <Routes>
    <Route path="/items/:itemId/*" element={<ItemPage />} />
  </Routes>
</Parent>

..。

<ItemPage>
  <Routes>
    <Route path="info" element={<ItemInfo />} />         // "/items/:itemId/info"
    <Route path="settings" element={<ItemSettings />} /> // "/items/:itemId/settings"
  </Routes>

  <Sidebar />
</ItemPage>