React Router v6嵌套路由中NavLink的相对路径导航实现

在你的路由配置中，/game/:id/*是一个嵌套路由，对应的GameRoutes组件要实现无需显式写game/:id前缀的站内导航，只需要用相对路径替代绝对路径即可：

具体修改方法 #

把NavLink的to属性值去掉开头的斜杠，改成相对路径形式：

<ul>
   <NavLink to="/">Dashboard</NavLink> {/* 保持绝对路径跳回首页 */}
   <NavLink to="mercenaries">Mercenaries</NavLink>
   <NavLink to="missions">Missions</NavLink>
   <NavLink to="vault">Vault</NavLink>
</ul>

原理说明 #

React Router的NavLink/Link组件会自动识别当前组件所在的路由上下文：

• 当你在/game/1路径下的GameRoutes组件中点击to="mercenaries"时，会自动基于当前路由路径拼接，最终导航到/game/1/mercenaries
• 如果需要返回上一级路由（比如从/game/1/mercenaries回到/game/1），可以使用to=".."这种相对路径写法

这种方式是最简洁的实现，不需要额外获取路由参数或手动拼接路径。

内容的提问来源于stack exchange，提问作者Cezar