react-router中this.props.history为undefined?解决报错Cannot read property ‘push‘ of undefined

在使用this.props.history.push(’/xxx’)的时候遇到这个报错：

大概率原因：

只有用了Route组件，才会在子组件中注入route props(即 history, location, match)
详见官方文档route props

---

所以下面这个例子中，
Header 和 Footer组件中，this.props.history === undefined，
在ModuleA 和 ModuleB中，this.props.history就有值（因为有< Route > 包裹）

export default class App extends Component {
    render() {
        return (
            <Router>
                    <Header /> // Header这个组件的props中 没有 history
                    <Switch>
                        <Route exact path='/moduleA'><ModuleA/></Route> // ModuleA这个组件的props中 有 history
                        <Route exact path='/moduleB'><ModuleB/></Route>
                    </Switch>
                    <Footer />
                </div>
            </Router>
        );
    }
}

解决方法：

即, 如何在没有用Route包裹的组件中获取history?

react-router官网中提供了 withRouter：
官网中写的明明白白：

You can get access to the history object’s properties and the closest 's match via the withRouter higher-order component.

具体用法如下，就可以在Header组件中用 this.props.history.push啦

import React from 'react';
import { withRouter } from 'react-router-dom';

class Header extends React.Component {
    // ...
}

export default withRouter(Header); // 重点在这里！！！