react-router-dom@4.2.2导入useParams提示未导出该如何解决

问题原因 #

useParams 是 React Router 在 v5.1.0 版本才新增的路由 Hooks API，你当前使用的 v4.2.2 版本不支持该语法，因此会抛出导出失败的报错。

解决方案 #

方案1：升级react-router-dom版本（推荐） #

升级到支持 Hooks 的稳定版本即可直接使用原有代码，执行安装命令：

npm install react-router-dom@5.3.4
# 或使用yarn
yarn add react-router-dom@5.3.4

升级后原有调用 useParams 的代码无需修改即可正常运行。

方案2：适配v4版本写法，无需升级依赖 #

v4版本需要通过 withRouter 高阶组件来获取路由参数，修改你的组件代码如下：

import { withRouter } from 'react-router-dom';
import DATA from '../Data';

const ProductDetail = (props) => {
    {/* 从props.match中获取路由参数 */}
    const proid = props.match.params;
    const proDetail = DATA.filter(x => x.id == proid.id)
    const product = proDetail[0];
    console.log(product);
    // 其余组件逻辑保持不变
}

// 用withRouter包裹组件后导出
export default withRouter(ProductDetail);

内容的提问来源于stack exchange，提问作者Agus Rifaldi