在 React Router v6 中定义参数

Question

自 React Router v6 更新以来，使用参数渲染子节点的方式发生了变化。 以前在 v5 中，您可以在 URL 中定义预期参数以根据预期参数呈现子项，但现在您不能。 目前从 v5 更新到 v6，这导致当前路由问题。

我浏览了新文档中的几个位置，但似乎找不到我要查找的内容：

• API 参考
• 主要概念

从文档中：

<Route path="parent" element={<Parent />}>
  <Route path=":child" element={<Child />} />
</Route>

我正在尝试做的事情：

<Route path="parent/:child" element={<Parent />}>
  <Route path="parent/child1" element={<Child1 />} />
  <Route path="parent/child2" element={<Child2 />} />
</Route>

在 v5 中，您可以在定义您期望的参数的地方做一些事情：

path="parent/:child(child1|child2)"

现在有没有办法在 v6 中做到这一点？ 这些文档非常稀疏，描述性也不是很好。 有人对此有解决方案吗？

Answer 1

RRDv6 中的Route组件不再采用 REGEX 路径。 您可以在Rexexp 路由路径发生了什么？

据我所知，您并没有使用参数作为变量来访问路由组件，而是更多地用于压缩路由定义。 在 RRDv6 中，您显式渲染“child1”|“child2”嵌套路由组件。

<Route path="parent" element={<Parent />}>
  <Route path="child1" element={<Child1 />} /> // "../parent/child1"
  <Route path="child2" element={<Child2 />} /> // "../parent/child2"
</Route>