v6版本升级后URL参数处理踩坑记录

React Router v6升级后URL参数处理踩坑记录

从v5升级到v6版本后，URL参数的处理方式发生了重大变化，导致项目中多个地方出现bug。

问题现象

在v5中使用match.params.id获取参数，v6中直接使用会报错。实际代码中遇到以下情况：

// v5写法 - 现在失效
const { id } = useParams(); // 这样写会返回undefined

// v6正确写法
const params = useParams();
const id = params.id;

复现步骤

1. 创建路由配置：<Route path="/user/:id" element={<UserPage />} />
2. 在组件中使用：const { id } = useParams();
3. 访问URL：http://localhost:3000/user/123
4. 发现id为undefined

解决方案

正确的做法是：

// 方法一：解构赋值
const params = useParams();
const { id } = params;

// 方法二：直接访问
const params = useParams();
const userId = params.id;

其他注意事项

• v6中useParams()返回的是对象而非数组
• 需要检查所有使用参数的地方
• 建议统一在路由配置文件中定义参数类型

升级过程中建议先做全面的参数使用扫描，避免遗漏问题。