react-router-dom@4.3.1调用useParams提示is not a function如何解决？

• useParams 是React Router v5.1版本才新增的Hook API，你当前使用的react-router-dom@4.3.1版本不包含该API，调用会抛出类型错误
• 你当前使用的是类组件写法（代码中包含this.props、类实例方法定义），而React Hook只能在函数组件或自定义Hook中调用，即便升级版本也无法直接在类组件中使用useParams

方案1：不升级版本，适配现有代码（推荐） #

使用v4版本支持的withRouter高阶组件获取路由参数，改动成本最低：

1. 修改导入语句，替换useParams为withRouter

import { withRouter } from "react-router-dom";

2. 修改handleSearchInfo方法，从props的match对象中取参数

handleSearchInfo = () => {
  const { id } = this.props.match.params;
  const { dispatch } = this.props;
  dispatch({
    type: 'activityM/getActivityDetail',
    payload: { pageSize: 10, pageNum: 1, id: id },
  });
};

3. 导出组件时用withRouter包裹

// 原导出写法类似 export default TableList，修改为：
export default withRouter(TableList);

方案2：升级版本使用useParams #

如果需要使用useParams，需同时完成两处改动：

1. 升级react-router-dom到v5.1及以上版本

npm install react-router-dom@^5.3.4

2. 将当前类组件重构为函数组件，即可正常调用useParams获取路由参数。

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