React Router DOM v6下Bootstrap搜索弹窗路由跳转异常问题

问题出在Link组件的相对路径与绝对路径使用错误。

核心问题 #

当你在/browse/:id页面内使用相对路径的Link时，React Router v6会基于当前页面的路由路径去拼接新路径：

• 在根路径/下点击Link to="browse/123"，会被解析为/browse/123（跳转正常）
• 但在/browse/123页面点击同样的Link，会被解析为/browse/123/browse/456（生成不存在的错误路径）

解决方法 #

确保Link的to属性使用绝对路径（路径开头加/）：

错误代码示例 #

// 相对路径，在详情页会生成错误路径
<Link to={`browse/${song.id}`} className="song-item">
  {song.title}
</Link>

修正后的代码 #

// 绝对路径，无论当前在哪个页面都能正确跳转
<Link to={`/browse/${song.id}`} className="song-item">
  {song.title}
</Link>

补充说明 #

如果你的路由配置中，歌曲详情页的路径确实是/browse/:id，那么使用绝对路径就能彻底解决这个跳转错误问题，完全不需要改用useNavigate。

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