React Router v6 Navlinks in nested Routes

Question

I have Routes in App.tsx:

<Routes>
  <Route path="/" element={<Dashboard />} />
  <Route path="/create" element={<CreateGame />} />
  <Route path="/game/:id/*" element={<GameRoutes />}></Route>
  <Route path="*" element={<NotFound />} />
</Routes>

In GameRoutes I have few NavLinks:

<ul>
   <NavLink to={"/"}>Dashboard</NavLink>
   <NavLink to={"/mercenaries"}>Mercenaries</NavLink>
   <NavLink to={"/missions"}>Missions</NavLink>
   <NavLink to={"/vault"}>Vault</NavLink>
</ul>

What is the way to use those links to navigate within "game/:id" without explicitly typing it in to (to={"game/:id/mercenaries"})? For example I want to go to "https://some.page/game/1" and then when navlinks shows I'd like to go to e.g. "https://some.page/game/1/mercenaries" just by clicking Mercenaries navlink.

Answer 1

You can use relative link paths instead of absolute link paths. "." refers to the current path where the links are rendered, assumed to be rendered by GameRoutes on "/game/:id".

Example:

<ul>
  <NavLink to=".">             // <-- "/game/:id"
    Dashboard
  </NavLink>
  <NavLink to="./mercenaries"> // <-- "/game/:id/mercenaries"
    Mercenaries
  </NavLink>
  <NavLink to="./missions">    // <-- "/game/:id/missions"
    Missions
  </NavLink>
  <NavLink to="./vault">       // <-- "/game/:id/valut"
    Vault
  </NavLink>
</ul>