//首先要下载yarn add react-loadable

//loadable.js文件

import React from 'react';

import Loadable from 'react-loadable';

const LoadableComponent = Loadable({

  loader: () => import('./'),  //./需要异步的组件

  loading(){

    return <div>正在加载</div>

    //可以加载一些好看的loading

  }

});

export default () => <LoadableComponent/>;

//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(<div></div>);

    }

}

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(

            <Provider store={store}>

                <BrowserRouter>

                    <div>

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

                    </div>

                </BrowserRouter>

            </Provider>

        );

    }

}