v6路由跳转路径错误排查：URL拼接问题处理技巧
最近在项目中进行React Router v6升级时，遇到了一个令人头疼的路由跳转问题。在v5版本中，我们使用<Link to="/user/123">这样的写法都能正常工作，但升级到v6后，发现部分页面跳转路径出现异常。
问题复现
// v5写法 - 正常
<Link to="/user/123">用户详情</Link>
// v6写法 - 出现问题
<Link to="/user/123">用户详情</Link>
// 实际跳转路径变成了：http://localhost:3000/user/123/123
根本原因
经过排查发现，问题出在项目中使用了useNavigate()进行编程式导航时的URL拼接逻辑。在v6中，路由匹配机制发生了变化，当传入相对路径时，会基于当前路径进行拼接。
解决方案
const navigate = useNavigate();
// 错误写法
navigate("/user/123");
// 正确写法 - 使用绝对路径
navigate("/user/123", { replace: true });
// 或者使用完整路径拼接
const currentPath = window.location.pathname;
navigate(`${currentPath}/user/123`);
最佳实践
建议在v6项目中统一使用绝对路径，避免相对路径导致的意外拼接问题。同时，在进行路由跳转前，可以先通过useLocation()获取当前路径再做处理。
升级过程中还发现v6对参数解析也有所调整，需要同步更新相关逻辑。
讨论