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