React v6调用this.props.history.push路由跳转报undefined错误怎么解决？

你遇到的报错是因为React Router v6 完全废弃了 v5 及更早版本中常用的 this.props.history 系列API，类组件默认不再能通过props获取到history对象，所以调用this.props.history时返回undefined，读取push方法就会抛出对应错误。

分两种场景处理：

场景1：列表页为函数组件 #

直接使用v6提供的useNavigate Hook实现跳转：

1. 先从react-router-dom导入依赖

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

2. 在组件内部声明navigate实例、修改跳转逻辑

function 你的列表组件名() {
  const navigate = useNavigate()
  // 其他组件逻辑
  const addContractor = () => {
    navigate("/add-contractor")
  }
}

场景2：列表页为类组件（你当前的写法大概率属于该场景） #

可以用高阶组件封装，给类组件注入navigate方法：

1. 先封装通用高阶组件

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

function withNavigate(Component) {
  return props => <Component {...props} navigate={useNavigate()} />
}

2. 导出组件时用高阶组件包裹

export default withNavigate(你的列表组件类名)

3. 修改跳转逻辑

addContractor() {
  this.props.navigate("/add-contractor");
}

如果没有历史兼容包袱，更推荐直接把类组件改写成函数组件，符合React当前的官方推荐开发规范，后续维护成本更低。

React Router v6 做了大量不兼容v5的破坏性更新，其中就包括移除了原有的history对象注入、withRouter高阶组件等API，统一使用useNavigateHook处理所有编程式路由跳转场景，没有经过特殊适配的类组件自然无法获取到旧版本的history对象。

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