v6版本升级后路由参数传递优化记录

React Router v6发布后，路由参数的处理方式发生了重大变化。在项目升级过程中，我们遇到了多个关于参数传递的问题，经过深入研究和实践，现将优化方案总结如下。

主要问题

v6中useParams()钩子返回的对象结构与v5有所不同，且在嵌套路由中参数传递需要特别处理。我们遇到的典型问题是：当使用<Route path="/user/:id/profile" />时，通过useParams()获取到的参数无法正确解析。

解决方案

1. 参数获取方式调整

// v5写法 (已废弃)
const { id } = this.props.match.params;

// v6写法
import { useParams } from 'react-router-dom';
const params = useParams();
const { id } = params;

2. 嵌套路由参数处理

// 父路由
<Route path="/user/:id" element={<UserLayout />}>  
  <Route index element={<UserProfile />} />
  <Route path="settings" element={<UserSettings />} />
</Route>

// 子组件中获取参数
function UserProfile() {
  const { id } = useParams();
  // 正确获取到id参数
}

3. 动态参数传递优化

import { useNavigate } from 'react-router-dom';

function UserList() {
  const navigate = useNavigate();
  
  const handleViewUser = (userId) => {
    // 推荐的参数传递方式
    navigate(`/user/${userId}/profile`);
  };
}

最佳实践

1. 统一使用useParams()和useNavigate()钩子
2. 避免在组件外层处理路由参数
3. 注意嵌套路由的路径匹配规则

通过以上优化，我们成功解决了参数传递问题，提升了应用的稳定性和可维护性。