v6路由参数传递踩坑：useNavigate参数格式化处理技巧

React Router v6相比v5在路由参数传递方面有了较大变化，特别是在使用useNavigate进行页面跳转时，参数格式化处理容易出现意外情况。

问题场景

在v6中，useNavigate的参数传递方式与v5不同。如果直接传递对象参数，可能会导致路由解析异常。

// ❌ 错误写法
const navigate = useNavigate();
const handleClick = () => {
  navigate('/detail', { state: { id: 123, name: 'test' } });
}

解决方案

1. 使用URLSearchParams格式化参数

const navigate = useNavigate();
const handleClick = () => {
  const params = new URLSearchParams({ id: '123', name: 'test' });
  navigate(`/detail?${params.toString()}`);
}

2. 结合useLocation获取参数

// 目标页面组件
const DetailPage = () => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  
  // 获取查询参数
  const id = searchParams.get('id');
  const name = searchParams.get('name');
  
  return <div>Id: {id}, Name: {name}</div>;
}

3. 自定义参数格式化函数

const formatNavigateParams = (params) => {
  if (!params) return '';
  const searchParams = new URLSearchParams();
  Object.keys(params).forEach(key => {
    searchParams.append(key, params[key]);
  });
  return `?${searchParams.toString()}`;
};

const navigateWithParams = (path, params) => {
  const formattedParams = formatNavigateParams(params);
  navigate(`${path}${formattedParams}`);
};

最佳实践建议

1. 优先使用查询参数而非state传递
2. 统一参数格式化处理逻辑
3. 注意特殊字符的编码处理
4. 合理选择路由参数传递方式

通过以上技巧，可以有效避免v6中路由参数传递的常见问题。