React Router v6参数化路由内页面相对链接跳转失效问题

这是React Router v6 刻意设计的路径解析规则，并非bug，和传统静态网页的相对路径解析逻辑有本质区别：

• v6中所有不带前导斜杠的相对路径，解析基准是路由配置的层级结构，而非浏览器地址栏的URL字符串。这个设计的目的是适配嵌套路由的组件化特性：当你调整路由的嵌套关系时，路由内部的相对链接不需要修改就能正常跳转。
• 解析规则非常明确：
  • 以./开头或者不带前缀的路径，会相对于当前组件匹配的路由自身路径进行拼接
  • 以../开头的路径，每写一个..就向上回退一层路由路径段
    你的场景中，GenericPage组件匹配的路由是/docs/generic/:id，这个路由共占3层路径段：docs→generic→:id。当你写./foo时，v6会把它拼接在当前路由路径的末尾，最终解析为/docs/generic/[当前id]/foo，自然匹配不到你定义的单层路由，所以跳转失效。你之前尝试../写法没有实现预期效果，大概率是拼写时多写或少写了路径段，这个写法本身是完全可行的。

将页面内的相对链接改为回退一层路由段后再拼接目标id即可，也就是把原来的./foo、./bar替换为../foo、../bar，修改后的GenericPage代码如下：

function GenericPage() {
  const { id } = useParams();
  return (
    <div className="page">
      <p>Document id: {id}</p>
      <div>
        页面内链接可正常跳转：
        <Link to="../foo" className="link">
          Foo
        </Link>
        <Link to="../bar" className="link">
          Bar
        </Link>
      </div>
    </div>
  );
}

修改后点击链接会被正确解析到/docs/generic/foo、/docs/generic/bar，和顶部导航的绝对路径跳转效果完全一致。

如果后续你在/docs/generic/:id路由下嵌套了更深的子路由（比如/docs/generic/:id/info、/docs/generic/:id/edit），在子路由页面跳转到其他同级文档时，只需要对应增加..的层数即可，比如在edit页面写../../foo就能跳转到foo文档，路径始终和路由的嵌套层级一一对应。
如果你不想记忆相对路径的层级规则，也可以直接写绝对路径，或者通过useMatch hook获取当前路由的基础路径后拼接目标地址，效果完全相同。

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