使用useParams()从路由/:id/prices获取ID时返回undefined的解决方法

DevOps 小满

2026-7-20

解决React Router中useParams获取id为undefined的问题

确认组件与路由的对应关系
你的路由中使用的是<PricesHistory />组件，但给出的组件代码是const Component = () => {...}，要确保这个Component就是PricesHistory，或者在PricesHistory组件内部正确调用useParams。组件不对应会直接导致无法获取路由参数。
检查React Router的导入和版本
必须从react-router-dom正确导入useParams：
```
import { useParams } from 'react-router-dom';
```
你的路由结构是React Router v6的写法（用<Routes>包裹<Route>），要保证项目安装的是v6版本，版本不匹配会引发参数获取失败。
替换原生a标签为React Router的Link组件
原生<a>标签会触发页面刷新，导致React Router的路由状态丢失，参数无法被正确捕获。改用<Link>组件跳转：
```
import { Link } from 'react-router-dom';

// 替换原有a标签
<Link to={`/${id}/prices`}>
  查看历史记录 →
</Link>
```
验证跳转时的id值是否有效
跳转前确认id变量有实际值，比如打印跳转时的id，避免因为id本身是undefined，导致URL变成/undefined/prices，这种情况下useParams拿到的id自然也是undefined。