React Router v6嵌套路由重复点击URL重复追加子路径问题

手动读取window.location.pathname拼接子路由的写法存在逻辑缺陷：

• 首次停留在父路由/maintenance/1时，pathname值和父路由路径一致，拼接/components可以正常跳转到目标地址
• 首次跳转完成后，当前页面的pathname已经变为/maintenance/1/components，此时再次点击按钮，就会在现有路径末尾重复追加components段，导致URL异常。

react-router-dom v6本身内置了路由上下文感知能力，完全不需要手动读取window对象做路径拼接。

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

Link组件的to属性原生支持相对路径，会自动基于当前匹配的父路由层级做路径拼接，不需要手动拼全路径：

// 错误写法
<Link to={`${window.location.pathname}/components`}>Components</Link>

// 正确写法：直接写子路由段即可，自动基于当前父路由路径拼接
<Link to="components">Components</Link>

如果要明确指定相对层级，避免歧义，可以加./前缀显式表示当前路由层级：

<Link to="./components">Components</Link>

这种写法的好处是后续如果调整父路由的路径前缀，不需要修改所有子导航的跳转地址，维护性更好。

方案2：基于路由参数拼接绝对路径 #

如果习惯写全路径，不要从window.location取值，用react-router-dom提供的useParams钩子拿路由参数拼接即可：

import { Link, useParams } from 'react-router-dom';

export default function VesselMaintenance() {
  const { id } = useParams();
  return (
    <div className="nav-list">
      {/* 直接拼绝对路径，不会出现重复追加问题 */}
      <Link to={`/maintenance/${id}/components`}>Components</Link>
      {/* 其他导航项 */}
    </div>
  )
}

• 开发react-router-dom相关功能时，尽量不要直接依赖window.location做路径计算，路由库内部维护了独立的路由匹配状态，直接读取原生location很容易出现状态不同步的问题
• 嵌套路由场景优先使用相对路径写法，代码更简洁，耦合度更低

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