什么是异步组件？简单来说就是异步加载一个组件，正常情况浏览器加载的是我们打包好的bundle.js文件，那么这个文件是集合了所有js是代码，然而我们首屏加载并不需要一次性加载所有的组件，这会造成性能的损耗，所以我们可以使用异步组件，推荐使用（react-loadable）https://github.com/jamiebuilds/react-loadable，那么使用react-loadable就会造成路由跳转的问题，所以我们需要使用withRouter来解决，withRouter组件的功能是让当前组件有能力获取到所有的参数和内容

//首先要下载yarn add react-loadable//loadable.js文件import React from 'react';import Loadable from 'react-loadable';const LoadableComponent = Loadable({  loader: () => import('./'),  //./需要异步的组件  loading(){    return 
     
      正在加载
     
    //可以加载一些好看的loading  }});export default () => 
     ;

//index.js文件import React, { Component } from 'react';import { withRouter } from 'react-router-dom';import { connect } from 'react-redux';class Detail extends Component{    render(){        console.log(this.props.match.params.id);  //这时候就可以获取到了，页面也不会报错了        return(
     
);    }}export default connect(mapState, mapDispatch)(withRouter(Detail));//路由部分import React, { Component } from 'react';import { BrowserRouter, Route } from 'react-router-dom';import { Provider } from 'react-redux';import store from './store';import Detail from './pages/detail/loadable.js';class App extends Component{    render(){        return(            
                     
                          
       
                        
                            
       
                
                  
             );    }}