connect和next的withRouter共同时候时踩坑

问题重现

当同时使用两者时，在代码中切换router并不会重新reRender组件，代码如下：

export default connect((state: any) => {  return {    x: state.common.x,  }})(withRouter(Index))

问题原因

connect本身将组件变为pureComponent，next的withRouter并没有对router做任何处理，而是直接返回。

connect 源码return function connect(  mapStateToProps,  mapDispatchToProps,  mergeProps,  {    pure = true,    areStatesEqual = strictEqual,    areOwnPropsEqual = shallowEqual,    areStatePropsEqual = shallowEqual,    areMergedPropsEqual = shallowEqual,    ...extraOptions  } = {}) {}

withRouter源码render() {  return <ComposedComponent    router={this.context.router}    {...this.props as any}  />}

解决方案

1、将withRouter包在connect外层使用。

export default withRouter(  connect((state: any) => {    return {      x: state.common.x,    }  })(Index),)

2、在使用connect时将组件pure的值默认改为false。