react-router4以后動(dòng)態(tài)加載解決辦法（code-split）

FingerLiu 發(fā)布于2019-08-20 16:38 / 2812人閱讀

摘要：都升級(jí)到了，之前用的，想用新建個(gè)項(xiàng)目用一下首先是用法變了，使用了，本以為錯(cuò)誤在這里，折騰半天發(fā)現(xiàn)不是，第二官方的方案看文檔，不多說(shuō)，但是，一定會(huì)遇到如下報(bào)錯(cuò)了半天，里，方法里，改寫為世界安靜了地址

react-router都升級(jí)到5.0了，之前用的2.*，想用create-react-app新建個(gè)項(xiàng)目用一下

首先是react-router-redux用法變了，使用了ConnectedRouter，本以為錯(cuò)誤在這里，折騰半天發(fā)現(xiàn)不是，

ReactDOM.render(
    
        
           
        
    ,
    document.getElementById("root")
)

第二官方的code-split方案https://reacttraining.cn/web/...

看文檔，不多說(shuō)，但是，一定會(huì)遇到如下報(bào)錯(cuò)

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: null. Check your code at index.js:44.
    in Bundle (at index.js:43)
    in Abouts (created by Route)
    in Route (at index.js:56)
    in div (at index.js:54)
    in App (at index.js:67)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (at index.js:66)
    in Provider (at index.js:65)

google了半天，
bundle.js里，render方法里，改寫

render() {
    return this.props.children(this.state.mod)
  }

為：

return this.state.mod ? this.props.children(this.state.mod) : null

世界安靜了

github地址：https://github.com/jiangbo201...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83057.html

相關(guān)文章

webpack and react-router按需加載

showImg(https://segmentfault.com/img/bVbph8o?w=2300&h=1224); 原理：CommonJS與import() 方法一：CommonJS模塊語(yǔ)法利用require.ensure,require.ensure()是webpack特有的，已經(jīng)被import()取代。方法 require.ensure( dependencies: String...

lowett 2019-08-23 15:37 評(píng)論0 收藏0
webpack源碼分析之二：code-splitting

摘要：前言是最引人矚目的特性之一此特性將代碼分離到不同的文件中。功能分析官網(wǎng)上有三種方式實(shí)現(xiàn)入口起點(diǎn)使用選項(xiàng)手動(dòng)分離代碼。防止重復(fù)使用去重和分離。本質(zhì)則是多個(gè)入口的，則在以為入口文件將多入口的切分為按切割文件通過(guò)加載。前言 code-splitting是webpack最引人矚目的特性之一,此特性將代碼分離到不同的bundle文件中。詳細(xì)介紹官網(wǎng)code-split,這次實(shí)現(xiàn)則在筆者上次文件...

wudengzan 2019-08-22 17:32 評(píng)論0 收藏0
2017前端性能優(yōu)化清單

摘要：性能最好具有可量化可監(jiān)測(cè)以及可改動(dòng)的特性。下文是一份年的前端性能優(yōu)化清單，闡述了作為前端開發(fā)人員，為了確保反饋速度以及瀏覽器兼容性我們需要考慮的問(wèn)題。地圖設(shè)計(jì)的決定違背了性能理念，所以他在這份清單內(nèi)的順序有待考慮。 2017前端性能優(yōu)化清單你開始使用漸進(jìn)啟動(dòng)了么？是不是已經(jīng)使用過(guò)React和Angular中tree-shaking和code-splitting兩個(gè)工具？有沒有用過(guò)Br...

verano 2019-08-20 13:45 評(píng)論0 收藏0
2017前端性能優(yōu)化清單

摘要：性能最好具有可量化可監(jiān)測(cè)以及可改動(dòng)的特性。下文是一份年的前端性能優(yōu)化清單，闡述了作為前端開發(fā)人員，為了確保反饋速度以及瀏覽器兼容性我們需要考慮的問(wèn)題。地圖設(shè)計(jì)的決定違背了性能理念，所以他在這份清單內(nèi)的順序有待考慮。 2017前端性能優(yōu)化清單你開始使用漸進(jìn)啟動(dòng)了么？是不是已經(jīng)使用過(guò)React和Angular中tree-shaking和code-splitting兩個(gè)工具？有沒有用過(guò)Br...

kycool 2019-08-30 15:52 評(píng)論0 收藏0
2017前端性能優(yōu)化清單

摘要：性能最好具有可量化可監(jiān)測(cè)以及可改動(dòng)的特性。下文是一份年的前端性能優(yōu)化清單，闡述了作為前端開發(fā)人員，為了確保反饋速度以及瀏覽器兼容性我們需要考慮的問(wèn)題。地圖設(shè)計(jì)的決定違背了性能理念，所以他在這份清單內(nèi)的順序有待考慮。 2017前端性能優(yōu)化清單你開始使用漸進(jìn)啟動(dòng)了么？是不是已經(jīng)使用過(guò)React和Angular中tree-shaking和code-splitting兩個(gè)工具？有沒有用過(guò)Br...

CollinPeng 2019-08-01 16:12 評(píng)論0 收藏0