动态嵌套路由 - React Router v6

Question

你如何处理动态的嵌套路由？ 我无法获得第二个动态渲染路径。 我从来没有处理过双重动态路由。 房子可以是任何东西，房子的回合也是动态的。

<Route path="/:house" element={<House />} />

<Route path="/:house/:id" element={<Round />} />   // no idea how to trigger/handle this?

Answer 1

看起来您正在使用 React 路由器 6，因为您使用的是 element element prop。 在 React 路由器 6 中，相对路由可以嵌套在父路由中，即嵌套路由是父路由的子路由。 像这样：

<Route path=":house" element={<House />}>
  <Route path=":id" element={<Round />} />
</Route>

正斜杠是自动处理的，您不需要手动添加它们。

更多详情： https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes