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。