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。