withRouter的适用场景
1.避免更新受阻
因为react-redux的connect高阶组件会为传入的参数组件实现shouldComponentUpdate 这个钩子函数,导致只有prop发生变化时才触发更新相关的生命周期函数(含render)而很显然,我们的location对象并没有作为prop传入该参数组件// beforeexport default connect(mapStateToProps)(Something)// afterimport { withRouter } from ‘react-router-dom’export default withRouter(connect(mapStateToProps)(Something))
2.在组件中意图使用history来控制路由跳转
import React from “react”;import {withRouter} from “react-router-dom”;class MyComponent extends React.Component { … myFunction() { this.props.history.push(“/some/Path”); } …}export default withRouter(MyComponent);
如果我们不使用withRouter来处理(MyComponent),那么我们这里的this.props就取不到history,会报hitstory is undefiend之类的错。