React Router useHistory返回undefined，调用push方法抛错求助

核心错误点 #

• useHistory 钩子的调用方式错误：useHistory 返回值直接是history实例，不需要解构赋值，你现在写的const { history } = useHistory()相当于从history实例上读取不存在的history属性，得到的自然是undefined，调用push方法就会触发你遇到的报错。

分版本解决方案 #

如果你使用的是 react-router v5 版本 #

直接修改useHistory的调用代码即可：

// 原错误代码
// const { history } = useHistory()
// 修改为
const history = useHistory()

修改后原来的history.push("/country/list")可以正常执行。

如果你使用的是 react-router v6 版本 #

v6版本已经移除了useHistory钩子，替换为useNavigate，需要调整代码：

1. 替换导入语句

// 删掉原来的useHistory导入
import { useParams, useNavigate } from 'react-router';

2. 替换钩子调用和跳转逻辑

// 原代码
// const { history } = useHistory()
// 修改为
const navigate = useNavigate()

// 原跳转代码 history.push("/country/list") 修改为
navigate("/country/list")

额外说明 #

你之前尝试用withRouter包裹组件不生效的原因是，问题本身是钩子用法错误，和组件有没有注入路由属性无关，函数组件直接使用路由钩子即可满足需求，不需要额外用withRouter包裹。

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