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

在将项目从React Router v5升级到v6的过程中，我们遇到了一个棘手的路由跳转问题。当使用useNavigate进行编程式导航时，发现路径拼接出现了异常。

问题复现步骤

// v5写法（正常）
const navigate = useNavigate();
navigate('/user/profile');

// v6中出现的问题代码
const navigate = useNavigate();
const basePath = '/user';
const path = 'profile';
navigate(basePath + path); // 错误拼接导致路径异常

问题分析

在v6中，useNavigate的参数处理逻辑发生变化。当传入相对路径时，它会基于当前路由进行解析，而不是简单的字符串拼接。如果路径开头没有'/'，可能会被当作相对路径处理。

解决方案

方案一：确保路径以'/'开头

const navigate = useNavigate();
const basePath = '/user';
const path = 'profile';
navigate(`${basePath}/${path}`); // 正确的拼接方式

方案二：使用useLocation配合处理

const location = useLocation();
const navigate = useNavigate();
const fullPath = `${location.pathname}/profile`;
navigate(fullPath);

最佳实践

1. 在项目中统一使用绝对路径格式
2. 建立路由工具函数处理路径拼接
3. 使用类型检查确保参数正确性

升级过程中建议仔细测试所有导航逻辑，避免此类问题影响用户体验。