javascript 在嵌套路由中React路由器v6导航链接

fnvucqvd  于 2023-02-28  发布在  Java
关注(0)|答案(1)|浏览(154)

我有App.tsx中的Routes

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

GameRoutes中,我有几个NavLink

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

如何使用这些链接在“game/:id”中导航,而无需明确输入toto={"game/:id/mercenaries"})?例如,我想转到“https://some.page/game/1“,然后当导航链接显示我想转到例如“https://some.page/game/1/mercenaries“时,只需单击雇佣兵导航链接。

o0lyfsai

o0lyfsai1#

您可以使用***相对***链接路径,而不是绝对链接路径。"."是指呈现链接的当前路径,假定由GameRoutes"/game/:id"上呈现。
示例:

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

相关问题