React类组件调用this.props.history.push报push undefined如何解决

AI 小北

2026-10-1

报错原因

这个错误是因为你的Form类组件没有被React Router直接注入路由属性：只有被<Route>组件直接匹配渲染的组件，props中才会默认携带history对象，你的组件不满足这个条件，所以this.props.history为undefined，调用push方法就会抛出该错误。
另外补充两个代码里的常识错误：

history.push是用来跳转单页应用内部路由的，参数是你在路由配置中定义的路径字符串，不能直接写页面组件的文件名/formPage.js
要跳转谷歌这类外部站点，不能用history.push，直接调用window.location.href = 'https://www.google.com'即可。

解决方案（无需改造为函数组件）

方案1：适用于react-router-dom v5及更早版本

用官方提供的withRouter高阶组件包裹你的组件，就能自动注入history等路由属性：

导入withRouter

import { withRouter } from 'react-router-dom'

修改导出语句，组件定义保持不变，最后导出时用withRouter包裹：

export default withRouter(Form)

修改完成后this.props.history就能正常调用push方法了。

方案2：适用于react-router-dom v6版本

v6版本官方移除了withRouter，你可以自己封装一个简易的高阶组件来实现相同的能力：

先在当前文件或者公共工具文件里定义withRouter高阶组件：

import { useNavigate, useLocation, useParams } from 'react-router-dom';

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let navigate = useNavigate();
    let location = useLocation();
    let params = useParams();
    return (
      <Component
        {...props}
        history={{ push: (path) => navigate(path) }}
        location={location}
        params={params}
      />
    );
  }
  return ComponentWithRouterProp;
}