25.异步组件及withRouter路由方法使用19-07-09

见代码https://gitee.com/XiaoKunErGe/JianShu.git历史版本第24次提交。
这时打开检查，选择NetWork和JS ,点击切换页面会发现，所有页面对用的组件的代码都在bundle.js里

屏幕快照 2019-07-09 13.26.46.png
访问首页的时候把详情页面和登录页面的代码一起加载了，这样实际上首页的加载速度回很慢。
所以希望访问首页的的时候只加载首页代码，访问详情页的时候再加载详情页的代码，这就需要使用异步组件来实现我们的想法。
异步组件底层会比较复杂，但是我们使用封装起来的第三方组件来实现会非常简单。
这里介绍的是react-loadable
1.到Github上搜索一下https://github.com/jamiebuilds/react-loadable有好多星星✨
我们找到它的介绍安装
yarn add react-loadable
2.到pages目录下的detail目录下创建loadable.js文件，并将GitHub上的react-loadable的example例子复制到这个文件中

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

3.对这个例子进行修改

import React from 'react';
import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
    loader: () => import('./'),//这个组件时异步加载的，要下载的是当前目录下的index.js文件，这里的import指的是异步加载语法
//loading指的是你要加载这个组件需要一个时间，在这个时间里可以在这个页年上暂时显示一些内容
 loading(){
    return <div>正在加载...</div>//使用<div>需要引入import React from 'react';不然不识别JSS语法
}
});

//返回一个无状态组件直接把<LoadableComponent/>返回出去
export default () => <LoadableComponent/>

4.到App.js中修改代码
将
import Detail from './pages/detail
改为
import Detail from './pages/detail/loadable.js';
刷新页面点击列表跳转到详情，这是页面跳转会报一个错

屏幕快照 2019-07-09 13.59.28.png
说不能直接读取this.props.match.params.id，之前引用的是import Detail from './pages/detail可以读取，现在引用的是import Detail from './pages/detail/loadable.js';不能直接读取，所以这里我们需要到detail文件的index.js中引用withRouter
5.在pages目录下detail的index中使用withRouter
import { withRouter } from 'react-router-dom';

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

这样就可以调用this.props.match.params.id了。