v6路由跳转路径拼接错误排查分享

在React Router v6升级过程中，路由跳转路径拼接错误是一个常见问题。本文分享一个典型的排查案例。

问题现象 在v6中使用useNavigate进行路由跳转时，发现路径被错误拼接。例如：

const navigate = useNavigate();
navigate('/user/profile'); // 实际跳转到 /user/user/profile

复现步骤

1. 在父路由中定义路径 /user
2. 在子组件中使用 useNavigate() 跳转到 /user/profile
3. 通过浏览器URL观察实际跳转路径

根本原因 v6中路由匹配机制发生变化，如果当前路由是 /user/，而跳转路径以 / 开头，会相对当前路径进行拼接。解决方案：

// 方案1：使用绝对路径（推荐）
navigate('/user/profile');

// 方案2：使用相对路径
navigate('profile'); // 相对于当前路由

// 方案3：使用完整的路径对象
navigate({ pathname: '/user/profile', search: '?tab=1' });

排查要点

• 检查当前路由层级
• 确认跳转路径是否以 / 开头
• 使用 useLocation 调试当前路径信息

通过规范路径书写方式，可有效避免此类拼接错误问题。