导入错误："useParams"未从"react-router-dom"导出

Question

我正在使用"react router dom"："4.2.2"；但是useParams不起作用我该怎么办？

import { useParams } from 'react-router-dom';
import DATA from '../Data';
const ProductDetail = () => {
{/* Now we need a product id which is pass from the product page. */}
const proid = useParams();
const proDetail = DATA.filter(x => x.id == proid.id)
const product = proDetail[0];
console.log(product);

Answer 1

如@slidowp2所述，您的react router dom版本应等于或大于5.1

使用以下命令将您的待反应路由器dom更新为最新版本

npm i react-router-dom@latest

或者将其更新为特定版本

npm install react-router-dom@5.1.2

Answer 2

useParams、useLocation、useHistory和useRouteMatch挂钩是从react-routerv.1.0 开始添加的

对于react路由器dom v4.x关于如何获得URL参数，已经有很多问题：

• 如何在react路由器dom v4中的组件中获取params

对于react router dom v5.1.0+，您可以使用useParams挂钩来获取URL params:codesandbox，您可以将URL更改为https://fmw9k.csb.app/blog/joke并查看控制台中的日志。