如何解决React中调用this.props.history.push出现reading 'push'类型错误

问题原因 #

你的代码存在4个核心问题导致跳转失败：

• 路由组件导入错误：将BrowserRouter错误别名成了Route，路由导入逻辑完全错乱
• 根组件未被路由容器包裹：index.js中直接渲染App组件，没有外层嵌套BrowserRouter，组件天生拿不到路由相关属性
• withRouter只导入未使用：导入了高阶组件withRouter但导出时没有包裹App，无法注入history属性
• 路由结构不完整：App内的Route没有外层Router/Switch包裹，路由匹配逻辑完全不生效

解决方案（适配react-router-dom v5版本） #

1. 修正index.js #

外层套BrowserRouter，给所有子组件提供路由上下文：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

2. 修正App.js的导入语句 #

修正错误的路由组件导入：

// 原错误导入删除，替换为
import { Route, Switch, withRouter  } from "react-router-dom";

3. 修正App.js导出语句 #

用withRouter包裹App，注入history属性：

// 原 export default App 替换为
export default withRouter(App);

4. 修正App内的路由结构 #

把Route放到Switch标签内，保证路由匹配逻辑生效：

{/* 把你原来写的 <Route path="/" component={Test} /> 替换为如下结构 */}
<Switch>
  <Route exact path="/" component={Test} />
  {/* 后续新增路由都可以放在Switch标签内 */}
</Switch>

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

v6已经移除了withRouter，推荐直接把类组件改成函数组件，用useNavigate实现跳转：

// 导入useNavigate
import { Routes, Route, useNavigate } from 'react-router-dom'

function App() {
  const navigate = useNavigate()
  // 点击跳转逻辑
  const handleClick = () => {
    navigate('/')
  }

  // 其他原有逻辑照搬即可

  // 路由结构替换为Routes
  return (
    {/* 其他原有代码 */}
    <Routes>
      <Route path="/" element={<Test />} />
    </Routes>
  )
}

export default App

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