导入错误：“useParams”未从“react-router-dom”导出答案

【问题标题】：import error: 'useParams' is not exported from 'react-router-dom'导入错误：“useParams”未从“react-router-dom”导出
【发布时间】：2022-01-12 09:25:40
【问题描述】：

我正在使用 "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);

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

正如@slideshowp2 提到的，你的 react-router-dom 版本应该等于或大于 5.1

使用以下命令将您的 react-router-dom 更新到最新版本

npm i react-router-dom@latest

或者更新到特定版本

npm install react-router-dom@5.1.2

【讨论】：

【解决方案2】：

useParams、useLocation、useHistory 和 useRouteMatch 自 react-router v5.1.0 以来添加了钩子

对于 react-router-dom v4.x 关于如何获取 URL 参数，已经有很多问题了：

How to get params in component in react router dom v4?

对于 react-router-dom v5.1.0+，你可以使用useParams钩子获取URL参数：codesandbox，你可以将URL更改为https://fmw9k.csb.app/blog/joke并在控制台查看日志。

【讨论】：

"react-router": "^5.2.1"，我添加了 react 路由器，但仍然是同样的错误
@AgusRifaldi 我用react-router-dom v5.1.0+做了一个例子