React中编程式导航报：index.js:25 Uncaught TypeError: Cannot read properties of undefined (reading ‘push‘)

原因：router版本控制问题

如果是用yarn add react-router-dom命令安装的版本那应该是5.0以上的版本，这是我之前用的但是编程式导航一直报如上错误，后面我查阅了很久的资料换成了5.0的版本，解决了那个报错，核心原因就是history属性识别不到push方法，通过很多总方法最终我锁定了用withRouter解决问题

通过withRouter解决方案

1、安装5.0的版本：npm install [email protected]
2、引入withRouter版本

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { withRouter } from 'react-router-dom';

3、通过withRouter将组件暴露出去

class Home extends React.Component{
    handleBack = () =>{
        // 使用编程式导航实现路由跳转
        this.props.history.push('/first')
    }
    render(){
        
        return(
            <div>
            <h2>我是后台首页</h2>
            <button onClick={this.handleBack}>返回登录页面</button>
        </div>
        )
    }
}
export default withRouter(Home);//重点解决问题关键

5.0版本和6.0版本的定义路由的写法

1、5.0版本写法

 <Route path="/first" component={导航的路由组件} />

2、6.0版本写法

<Routes><Route path="/first" element={<div>{导航的路由组件()}</div>} /></Routes>