v6升级血泪史：路由配置中的路径拼接错误处理
最近在将项目从React Router v5升级到v6时，遇到了一个令人头疼的bug——路由路径拼接错误。这个看似简单的问题，却让我花费了整整一天的时间来排查。
问题复现过程
升级后，我发现所有子路由都无法正常访问。通过调试发现，路由路径被错误地拼接了两次斜杠。比如：
// v5写法
<Route path="/user/:id" component={UserDetail} />
// v6写法
<Routes>
<Route path="/user/:id" element={<UserDetail />} />
</Routes>
但在实际访问时，路径变成了/user//123，多了一个斜杠。经过排查，发现在使用useNavigate()时传入的路径被错误拼接了。
根本原因
问题出在以下代码中：
const navigate = useNavigate();
const handleClick = () => {
// 错误写法
navigate(`/user/${userId}`); // 可能导致重复路径
}
// 正确写法应该是
const handleClick = () => {
navigate(`user/${userId}`); // 注意这里不要开头的斜杠
}
解决方案
- 统一处理路由路径：在项目中建立统一的路径处理函数
- 使用相对路径：避免在导航时使用以
/开头的绝对路径 - 添加路径验证中间件：在路由跳转前进行路径格式检查
const safeNavigate = (path) => {
const cleanPath = path.startsWith('/') ? path.slice(1) : path;
navigate(cleanPath);
}
这次升级让我深刻体会到，看似简单的路由配置，在版本升级时可能隐藏着许多陷阱。建议大家在升级前一定要做好充分的测试准备。
讨论