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

defcon 发布于2019-08-26 13:58 / 3347人阅读

摘要：问题重现当同时使用两者时，在代码中切换并不会重新组件，代码如下问题原因本身将组件变为，的并没有对做任何处理，而是直接返回。源码源码解决方案将包在外层使用。在使用时将组件的值默认改为。

问题重现

当同时使用两者时，在代码中切换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 
}

解决方案

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

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109940.html

react-router @4用法整理

摘要：官方文档源码这篇文章主要介绍了的基本用法包括动态路由编程式导航等安装用法动态路由的基本用法编程式导航总结安装用法示例代码关于路由重定向使用的格式注意位置需要在定义路由的后面比如重定向就需要写在后面关于路由匹配默认写在路由末尾前 router@4 react-router@4官方文档 github源码这篇文章主要介绍了react-router@4的基本用法,包括动态路由,编程式...

piglei 2019-08-21 17:52 评论0 收藏0
TypeScript 3.0 + React + Redux 最佳实践

摘要：首先声明这篇文章是想说明一下最新版本的的新特性带来的极大的开发体验提升而不是如何利用开发应用这个特性就是对的支持在的中有说明具体可以参考这里在版本之前我们在开发应用尤其是在配合一类库的时候经常用到诸如之类的封装而这些函数其实都可以用装饰器的首先声明, 这篇文章是想说明一下最新版本的 TypeScript(3.0) 的新特性带来的极大的 React 开发体验提升. 而不是如何利用 Ty...

CloudwiseAPM 2019-08-26 12:14 评论0 收藏0
Umi.js

摘要：，中文可发音为乌米，是一个可插拔的企业级应用框架。以路由为基础的，支持类的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。全局存于目录，所有页面都可引用页面不能被其他页面所引用。 umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展...

30e8336b8229 2019-08-26 13:29 评论0 收藏0
Router入门0x205: react-route + redux + react 集成

摘要：概述这一章终于大集成了集成源码效果说明集成主要是用到库集成源码效果说明主要用到库，是针对库在环境下的封装组件，注入等属性接管跟组件指定路由和组件的对应关系集成源码引入相关的包和链接组件效果说明主要用到库都是用的接 0x000 概述这一章终于大集成了 0x001 集成react 源码 import React from react import ReactDom from rea...

yiliang 2019-08-23 12:16 评论0 收藏0