使用參數反應路由器 v6 重定向

Question

我有以下代碼：

<Route
   path=":teamId"
   element={<Navigate to=":teamId/league" replace />}
/>

<Route path=":teamId/*" element={<TeamsPage />} />

當用戶訪問http:localhost:3000/liverpool我希望他們被重定向到http:localhost:3000/liverpool/league但我在 url 中看到以下內容

http:localhost:3000/:teamId/league

任何人都可以幫忙嗎？ 從 v5 -> v6 升級，我已經把我的頭發扯掉了。 我快到了，但肯定不容易..

Answer 1

這應該重定向到:teamId/league ：

<Route
   path=":teamId"
   element={<Navigate to="league" />}
/>

league前的to屬性中的正斜杠是不需要的。

Answer 2

問題

您正在重定向到路徑字符串文字":teamId/league" ，而不是使用相對路徑或其他模板文字。 OFC 這將導致重定向到"http:localhost:3000/:teamId/league" 。

解決方案

一種解決方案是在路徑"/:teamId"上使用布局路由，並使用索引路由重定向到呈現TeamsPage組件的嵌套"league"路由。

<Route path=":teamId">
  <Route index element={<Navigate to="league" replace />} />
  <Route path="league" element={<TeamsPage />} />
</Route>

Answer 3

嘗試這個：

<Route path=':teamId/*' element={<TeamsPage />} />
<Route path=':teamId' element={<Navigate to='league' />} />