React Router如何实现跳转后URL仅显示目标地址而非堆叠路径

用../拼接相对路径编写Link的to属性时，路径解析基准是浏览器地址栏当前已有的URL路径，而非项目本身的路由配置层级。每次跳转都会在现有路径的基础上做回退拼接，最终出现多层路径堆叠，地址栏无法显示纯目标跳转地址的问题。

• 替换为绝对路径跳转（最稳妥）
  全局页脚属于跨层级的通用组件，所有跳转链接优先使用以/开头的绝对路径，从域名根路径开始匹配目标地址，从根源上避免在当前URL基础上拼接的问题：

  // 原有问题代码
  <Link to={`../${item.href}`}>{item.title}</Link>
  
  // 修改后无路径堆叠的写法
  <Link to={`/${item.href}`}>{item.title}</Link>
  

• 编程式跳转替换历史栈（避免路径累加）
  如果通过useNavigate实现跳转逻辑，可以搭配replace: true参数，让跳转行为直接替换当前历史栈记录，不会在原有路径基础上累加：

  import { useNavigate } from 'react-router-dom'
  
  const Footer = () => {
    const navigate = useNavigate()
  
    const handleFooterJump = (item) => {
      // 从根路径匹配目标地址，替换当前历史记录
      navigate(`/${item.href}`, { replace: true })
    }
  
    return (
      <footer className="site-footer">
        {navList.map(item => (
          <span 
            key={item.href} 
            className="footer-link"
            onClick={() => handleFooterJump(item)}
          >
            {item.title}
          </span>
        ))}
      </footer>
    )
  }
  

• 明确相对路径的适用边界
  相对路径的解析逻辑只有在Link组件处于嵌套路由对应的Outlet渲染层级内时，才会基于路由配置的父级路径计算。像页脚这种放置在全局布局的组件，不属于嵌套路由的Outlet渲染树，不要使用带../的相对路径编写跳转地址，否则必然触发路径堆叠问题。

内容的提问来源于stack exchange，提问作者Eirik Vattøy