React-異步組件及withRouter路由方法的使用

　　所有組件的代碼都打包在bundle.js里，加載首頁的時候，把其它頁面的代碼也加載了，影響首頁加載速度。我們希望訪問首頁的時候只加載首頁，訪問詳情頁的時候再去加載詳情頁的代碼。異步組件可以幫我們實現，需要使用第三方依賴“react-loadable”。

安裝

npm install react-loadable --save

使用

一、新建loadable.js

loadable.js：

import React , {Component} from 'react';
import Loadable from 'react-loadable';
const LoadableComponent = Loadable({
  //意思是當前目錄下的index組件是異步加載的
  loader: () => import('./'),
  //加載時臨時顯示的組件
  loading:()=>{
      return <div>load</div>
  }
});
//返回一個無狀態組件LoadableComponent
export default ()=><LoadableComponent/>

二、修改APP.js

引入：

//不再是import Detail from './pages/detail';
import Detail from './pages/detail/loadable';

保存刷新頁面，結果報下圖錯。

　　這是為什么呢？因為路由"/detail/:id" 對應的組件是loadable.js,而不是之前的index.js，所以在loadable.js里可以獲取到this.props.match.params.id，而index.js里獲取不到。

<Route exact path="/detail/:id" component={Detail} />

　　有什么解決辦法嗎？

三、修改index.js

　　需要在index.js里引入react-router-dom的withRouter方法。

import {withRouter} from 'react-router-dom';

　　使用withRouter(Detail)使Detail有能力獲取到router里到所有參數。

export default connect(mapStateToProps,mapDispatchToProps)(withRouter(Detail));