理解withRouter

最新推荐文章于 2024-09-08 21:10:25 发布

下雨不愁233

最新推荐文章于 2024-09-08 21:10:25 发布

阅读量7.8k

点赞数 3

本文链接：https://blog.csdn.net/weixin_43271750/article/details/86299567

版权

withRouter的适用场景

1.避免更新受阻

因为react-redux的connect高阶组件会为传入的参数组件实现shouldComponentUpdate 这个钩子函数，
导致只有prop发生变化时才触发更新相关的生命周期函数(含render)而很显然，我们的location对象并没有作为prop传入该参数组件

// before
export default connect(mapStateToProps)(Something)

// after
import { 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之类的错。