React Router Dom Link跳转路径重复拼接 分类页跳转异常问题

问题根因 #

你在Link组件的to属性中使用了相对路径（开头没有斜杠），react-router处理相对路径时会基于当前页面的激活路由做拼接：首次点击时你处于根路由或/blog路由下，拼接后路径符合预期；当你已经处于/blog/category/:category1路径下时，再次拼接相对路径blog/category/:category2，就会出现路径段重复的问题。

修复方案 #

方案1：使用绝对路径（推荐） #

给路径开头添加斜杠/，明确指定从站点根路径开始计算，不会受当前路由影响：
如果你的react-router没有配置子目录前缀（basename），修改为：

<Link
  className="nav-link"
  aria-current="page"
  to={`/blog/category/${item}`}
>

如果你的应用部署在子目录，已经配置了basename="/blog"，修改为：

<Link
  className="nav-link"
  aria-current="page"
  to={`/category/${item}`}
>

方案2：相对路径回退（可选） #

如果你确定路由层级固定，也可以用../回退到上一级路由后再拼接新路径：

<Link
  className="nav-link"
  aria-current="page"
  to={`../category/${item}`}
>

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