React Router v6.0.0-beta.0升级beta.5后嵌套路由路径重复累加问题咨询

React Router v6.0.0-beta.1及后续版本调整了<Link>组件相对路径的解析规则：beta.0版本中相对路径默认基于当前嵌套路由的父路径解析，更新后默认基于当前地址栏的完整路径解析。
你在/users/me页面点击指向me的相对路径<Link>时，会直接在当前路径后拼接me，生成/users/me/me的异常路径，多次点击就会出现路径持续累加的问题。你当前的嵌套路由配置本身完全符合v6规则，不需要调整，仅需要修改跳转逻辑即可。

有三种常用的修复方式，可根据业务场景选择：

• 方案1：使用绝对路径写跳转目标
  直接把所有指向用户子路由的<Link>的to属性写为完整绝对路径，示例：

  <Link to="/users/me">个人中心</Link>
  <Link to="/users/all">所有用户</Link>
  

  这种写法逻辑最直观，不会受当前页面路径影响，适合路由层级不深的项目。

• 方案2：相对路径基于父路由层级跳转
  跳转时先回退到父路由层级再拼接子路径，示例：

  <Link to="../me">个人中心</Link>
  <Link to="../all">所有用户</Link>
  

  这种写法不需要写完整路径，适合路由层级经常调整的场景。

• 方案3：通过useRouteMatch获取父路径动态拼接
  如果你不想硬写路径前缀，可以在Users组件内用useRouteMatch获取当前父路由的路径，动态拼接子路由：

  import { useRouteMatch, Link } from 'react-router-dom';
  
  function Users() {
    const { path } = useRouteMatch();
    return (
      <div>
        <Link to={`${path}/me`}>个人中心</Link>
        <Link to={`${path}/all`}>所有用户</Link>
        {/* 原有子路由配置保持不变 */}
        <Routes>
          <Route path="me" element={<Me />} />
          <Route path="all" element={<All />} />
        </Routes>
      </div>
    )
  }
  

  这种写法复用性最高，适合封装公共路由组件的场景。

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