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

defcon 發布于2019-08-26 13:58 / 3388人閱讀

摘要：問題重現當同時使用兩者時，在代碼中切換并不會重新組件，代碼如下問題原因本身將組件變為，的并沒有對做任何處理，而是直接返回。源碼源碼解決方案將包在外層使用。在使用時將組件的值默認改為。

問題重現

當同時使用兩者時，在代碼中切換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。

GPU云服務器云服務器 withRouter 共同開發什么時候開始的高訪問的時候

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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