id 下的嵌套路由

Question

有没有办法通过这种方式使用 react-router 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/settings 更改内容“选项卡”被选中。这种方式在我的应用程序的其他任何地方都有效，但由于某种原因，它不适用于 :id.

下的嵌套路由

这个 doc 确实显示了嵌套路由的示例，但它不是嵌套路由。

Answer 1

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

见How do I nest routes deep in the tree?

示例：

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

id 下的嵌套路由

Nested route under id

reactjs

react-router