v6路由跳转失败：useNavigate参数传递问题排查分享

v6路由跳转失败：useNavigate参数传递问题排查分享

最近在将项目从React Router v5升级到v6时，遇到了一个令人头疼的问题：使用useNavigate进行路由跳转时，参数传递不生效。这个问题让我花费了整整一天时间才彻底排查清楚。

问题复现步骤

首先，让我们看看问题的具体表现。在v5中，我们这样写：

const history = useHistory();
history.push('/user/123?tab=profile');

但在v6中，我们改用useNavigate：

const navigate = useNavigate();
navigate('/user/123?tab=profile');

看起来完全一样，但实际运行时发现页面跳转了，但URL参数却丢失了。

根本原因

经过深入排查，发现问题出在v6的navigate函数对参数的处理方式上。在v6中，如果你直接传入包含查询参数的字符串，参数可能不会被正确解析和传递。

正确的做法应该是：

const navigate = useNavigate();
// 方法一：使用对象形式
navigate({ pathname: '/user/123', search: '?tab=profile' });

// 方法二：使用字符串但确保格式正确
navigate('/user/123?tab=profile', { replace: true });

// 方法三：如果需要传递state数据
navigate('/user/123', { state: { from: 'home' }, replace: true });

个人踩坑总结

1. v6的navigate API相比v5更加严格，需要遵循特定的参数格式
2. 在升级过程中，不要简单地替换函数名，要仔细阅读文档
3. 对于复杂的路由跳转需求，建议封装一个通用的路由跳转函数
4. 调试时可以使用浏览器控制台查看实际传递的参数

这个问题在团队协作中尤其容易被忽视，因为开发人员可能认为这只是简单的API替换。希望我的经验能帮助大家避免同样的坑。