v6路由参数处理

v6路由参数处理踩坑记录

最近项目从React Router v5升级到v6，其中路由参数处理这块踩了不少坑，特此记录。

问题场景

在v5中，我们使用match.params获取路由参数：

// v5写法
const UserPage = ({ match }) => {
  const { userId } = match.params;
  return <div>用户ID: {userId}</div>;
};

升级到v6后，发现match对象不存在了，改用useParams() Hook：

// v6写法
import { useParams } from 'react-router-dom';

const UserPage = () => {
  const params = useParams();
  const { userId } = params;
  return <div>用户ID: {userId}</div>;
};

核心坑点

1. 参数类型问题 v6中参数默认是字符串类型，如果之前v5是数字类型，在处理业务逻辑时需要手动转换。

2. 嵌套路由参数

// v6嵌套路由
<Routes>
  <Route path="/user/:userId" element={<UserLayout/>}>
    <Route path="profile" element={<Profile/>} />
    <Route path="posts/:postId" element={<PostDetail/>} />
  </Route>
</Routes>

在子路由中获取父级参数：

const PostDetail = () => {
  const { userId } = useParams(); // 父级参数
  const { postId } = useParams(); // 子级参数
  return <div>用户{userId}的文章{postId}</div>;
};

复现步骤

1. 创建路由配置
2. 使用useParams()获取参数
3. 在组件中打印参数类型
4. 发现参数为字符串而非预期数字

解决方案

const UserPage = () => {
  const { userId } = useParams();
  const numericId = parseInt(userId, 10);
  // 或者使用自定义Hook处理
};

建议在升级时统一处理参数类型转换，避免隐式类型转换问题。