React中如何解决Link组件生成重复URL（如/requests/requests）的问题？

问题原因 #

你遇到的/requests/requests重复路径问题，核心是React Router的路径解析规则：当Link组件的to属性使用相对路径（不以/开头）时，会自动基于当前页面的路由路径进行拼接。比如当前路径是/requests，相对路径requests就会被拼接到后面，变成/requests/requests。

解决方案 #

1. 直接使用绝对路径 #

确保singleCrumb.path的值是以/开头的绝对路径，比如"/requests"而非"requests"：

<Link key={i + singleCrumb.path} to={singleCrumb.path}>
  {singleCrumb.label + '/'}
</Link>

2. 动态转换为绝对路径 #

如果singleCrumb.path是动态生成的（可能存在相对路径的情况），可以通过判断统一处理成绝对路径：

<Link 
  key={i + singleCrumb.path} 
  to={singleCrumb.path.startsWith('/') ? singleCrumb.path : `/${singleCrumb.path}`}
>
  {singleCrumb.label + '/'}
</Link>

这个判断会自动给非绝对路径的字符串添加前缀/，避免路径重复拼接。

额外说明 #

你代码里的{singleCrumb.label + '/'}只是链接显示的文本，不会影响URL生成逻辑，无需修改这部分内容。

内容的提问来源于stack exchange，提问作者Abdel-Rahman