v6路由跳转失败原因排查：useNavigate参数格式化

在React Router v6升级过程中，路由跳转失败是一个常见问题。本文重点分析useNavigate参数格式化导致的跳转失败原因。

问题复现

使用useNavigate时，如果参数格式不正确会导致跳转失败。例如：

const navigate = useNavigate();
// 错误写法
navigate({ pathname: '/user', search: '?id=123' });
// 正确写法
navigate('/user?id=123');

核心原因

v6中useNavigate接受的参数格式发生了变化。旧版本可以接受对象形式，但v6要求直接传入字符串路径。如果传递对象，需要确保使用正确的路径格式。

解决方案

1. 使用字符串格式：navigate('/user?id=123')
2. 或者使用对象格式时要遵循特定结构：

navigate({
  pathname: '/user',
  search: '?id=123'
});

注意事项

• v6不支持useHistory，必须使用useNavigate
• 路由参数传递需注意编码问题
• 建议统一项目中的跳转方式，避免混用

通过正确的参数格式化，可有效避免路由跳转失败的问题。