React使用useHistory调用history.push报reading 'push' undefined错误如何解决

该报错本质是调用push方法时history对象为undefined导致的，绝大多数情况是react-router-dom版本不匹配导致的API调用错误，对应解决方案如下： #

方案1：使用react-router-dom v6版本（当前默认安装版本） #

v6版本已移除useHistoryAPI，替换为useNavigate，修改LoginForm组件代码即可：

1. 修改导入语句：

// 把原来的import {useHistory,withRouter} from 'react-router-dom'替换为
import { useNavigate } from 'react-router-dom';

2. 替换历史对象声明：

// 把原来的let history = useHistory();替换为
const navigate = useNavigate();

3. 修改跳转逻辑：

// 把原来的history.push("/dashboard")替换为
navigate("/dashboard");

方案2：使用react-router-dom v5版本 #

如果你明确使用的是v5版本，可选择以下两种方法解决：

方法A：使用withRouter高阶组件注入路由属性 #

你代码中已经导入了withRouter，直接修改组件导出逻辑即可：

1. 移除let history = useHistory();这一行
2. 修改组件导出语句：

// 把原来的export default LoginForm;替换为
export default withRouter(LoginForm);

3. 修改跳转逻辑：

// 把原来的history.push("/dashboard")替换为
props.history.push("/dashboard");

方法B：排查路由上下文 #

确认LoginForm组件是在<Router>组件包裹的范围内渲染，不存在挂载到Router外部的情况，同时清理项目依赖重新安装避免多版本冲突：

# 执行以下命令重新安装依赖
rm -rf node_modules package-lock.json yarn.lock
npm install

补充优化建议 #

你代码中声明的Login方法为async异步函数，但内部没有任何await逻辑，可以去掉async关键字避免不必要的运行时警告。 #

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