React中编程式导航踩坑

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>
  );
};