使用参数反应路由器 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' />} />