资讯专栏INFORMATION COLUMN

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

defcon / 3205人阅读

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

问题重现

当同时使用两者时,在代码中切换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 评论0 收藏0
  • TypeScript 3.0 + React + Redux 最佳实践

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

    CloudwiseAPM 评论0 收藏0
  • Umi.js

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

    30e8336b8229 评论0 收藏0
  • react 服务端(ssr) 框架next.js开发个人网站分享

    摘要:项目介绍利用服务端框架写的博客,喜欢就给个支持一下。运行部署使用说明关于演示不能上传图片,不能发表文章或者修改属于正常情况,因为只是为了展示。 next-blog 项目介绍 利用react服务端框架next.js写的博客,喜欢就给个Star支持一下。https://github.com/Weibozzz/next-blog线上地址: http://www.liuweibo.cn本项目使...

    caiyongji 评论0 收藏0
  • Router入门0x205: react-route + redux + react 集成

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

    yiliang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<