React调用history.push报Cannot read properties of undefined错误如何解决

你当前使用的是react-router-dom v6版本，出现报错有三个核心原因：

1. v6不再自动向类组件的props注入history对象，所以this.props.history是undefined，调用push方法自然报错
2. 路由配置存在用法错误，v6的BrowserRouter不支持自定义history属性，且存在重复嵌套Router的问题
3. 字符串插值使用了单引号，无法正确解析${id}变量

1. 修正根路由配置 #

首先修改index.js，将无效的BrowserRouter换成支持自定义history的HistoryRouter：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
// 导入HistoryRouter而非BrowserRouter，若导入报错可换成unstable_HistoryRouter
import { HistoryRouter as Router} from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Router history={history}>
        <App/>
    </Router>,
  document.getElementById('root')
);

reportWebVitals();

然后修改App.js，删除多余的Router导入：

// 删掉原来的Router导入即可，其余代码保持不变
import {Route,Routes} from 'react-router-dom'

2. 修正EmployeeList组件的跳转逻辑 #

你已经自行创建了history实例，直接导入使用即可，不需要从props取值：
首先在EmployeeList顶部导入你的history实例：

import history from '../history';

然后把所有this.props.history.push替换为history.push，同时把单引号包裹的插值语句换成反引号：

viewEmployee(id){
    history.push(`/viewEmployee/${id}`);
}
editEmployee(id){
    history.push(`/addEmployee/${id}`);
}
addEmployee(){
    history.push('/addEmployee/_add');
}

修改完成后跳转功能即可正常生效。

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