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