this.props.history.push()报错解决

在使用 React 的路由跳转时，出现了这个错误”cannot read property ‘push’ of undefined”，找来找去，发现是子组件这样调用时才会报错,它不是路由组件。以下是解决方案：

在我的每个页面中，Header 组件都会引入，使其成为子组件

通过父组件传值给子组件

在父组件中，传递一个 history 给子组件

1	<Header history={this.props.history} />

子组件方法还是一样写

1	this.props.history.push('/login')

但如果 Header 组件被嵌套封装更深的话是不行的，这时只能选择第二种方法。

使用 withRouter

默认情况下必须经过路由匹配渲染的组件才存在 this.props,才拥有路由参数，执行 this.props.history.push(‘/login’)跳转到对应路由的页面，然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用 withRouter 就可以给此组件传入路由参数，将 react-router 的 history、location、match 三个对象传入 props 对象上，此时就可以使用 this.props。

可见当一个非路由组件也想访问到当前路由的 match,location,history 对象，那么 withRouter 将是一个非常好的选择，可以理解为将一个组件包裹成路由组件。

用法：

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

// ...

export default withRouter(Header) // export时要使用withRouter

在 Header 组件引入并使用，就可以使用 this.props.history.push 方法进行正常跳转了~~