react-router 中 this.props.history 未定义 undefined 报错 Cannot read property ‘push‘ of undefined
在函数组件或类组件中
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
class Child extends React.Component {
handle = () => {
this.props.history.push('/home');
};
render() {
return <button onClick={this.handle}>点击</button>;
}
}
const App = () => {
return (
<Router>
<div>
<Child />
<Route path='/home' component={home} />
</div>
</Router>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
点击按钮报错, 说子组件里的this.props
是空对象
解决方案
查了很多资料发现 是因为父组件中 子组件没有包裹<Route></Route>
路由入口
这里的 就是一个高阶组件包装了我们的<Child>
组件
将history
的一系列方法传给了<Child>
const App = () => {
return (
<Router>
<div>
// 这里 子组件一定要写在入口里!!
<Route path='/' component={Child} />
<Route path='/home' component={first} />
</div>
</Router>
);
};