react router v6 redirect with params

Question

I have the following code:

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

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

When a user comes to http:localhost:3000/liverpool I want them to be redirected to http:localhost:3000/liverpool/league but I see the following in the url

http:localhost:3000/:teamId/league

Can anyone help? I am already tearing my hair out with this upgrade from v5 -> v6. I'm nearly there but it certainly hasn't been easy..

Answer 1

This should redirect to :teamId/league :

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

The forward slash in the to attribute before league is not needed.

Answer 2

Issue

You are redirecting to the path string literal ":teamId/league" instead of using a relative path or another template literal. This will, OFC, result in redirecting to "http:localhost:3000/:teamId/league" .

Solution

A solution would be to use a layout route on path "/:teamId" and use the index route to redirect to the nested "league" route rendering the TeamsPage component.

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

Answer 3

Try this:

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