React Router中如何让Link替换而非追加URL路径

问题场景 #

现有导航栏及路由配置代码如下：

<div>
  <span>
    <NavLink to="home">Home</NavLink>
  </span>
  <span>
    <NavLink to="find">Find</NavLink>
  </span>
</div>

<Routes>
  <Route path="/home" element={<Home />} />
  <Route path="/find" element={<Find />} />
</Routes>

在Home组件内使用以下代码尝试跳转：

<button>
  <Link to="find">
    Find
  </Link>
</button>

点击按钮后URL变为localhost:3000/home/find，期望直接跳转到localhost:3000/find，而非相对路径追加。

解决方案 #

问题出在你用了相对路径（"find"），React Router会基于当前页面URL自动追加路径。要实现绝对路径跳转，只需要在路径前加上斜杠/：

修改Home组件内的Link代码：

<button>
  <Link to="/find">
    Find
  </Link>
</button>

同时建议把导航栏里的NavLink路径也改成绝对路径，避免后续出现类似问题：

<div>
  <span>
    <NavLink to="/home">Home</NavLink>
  </span>
  <span>
    <NavLink to="/find">Find</NavLink>
  </span>
</div>

这样无论当前处于哪个路径，点击链接都会直接跳转到根路径下的对应页面，URL就会变成你期望的localhost:3000/find。

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