react-router-dom4.x按需加载

基于 react-loadable 来实现路由按需加载

npm install --save react-loadable

import React from 'react';
import ReactDOM from 'react-dom';
import { Route , BrowserRouter, Switch } from 'react-router-dom';
import {Provider} from 'react-redux';
import './config/rem.js';
import registerServiceWorker from './registerServiceWorker';
import Loadable from 'react-loadable';
import {store} from './redux/store/store';
import  './style/common.scss';

const MyLoadingComponent = ({ isLoading, error }) => {
    if (isLoading) {
        return <div>Loading...</div>
    }
    else if (error) {
        return <div>Sorry, there was a problem loading the page.</div>
    }
    else {
        return null;
    }
};

const AsyncHome = Loadable({
    loader: () => import('./page/home/'),
    loading: MyLoadingComponent
});
const AsyncWelcome = Loadable({
    loader: () => import('./page/welcome/'),
    loading: MyLoadingComponent
});
const AsyncLogin = Loadable({
    loader: () => import('./page/login/'),
    loading: MyLoadingComponent
});
const AsyncStore = Loadable({
    loader: () => import('./page/store/'),
    loading: MyLoadingComponent
});
const AsyncUser = Loadable({
    loader: () => import('./page/user/'),
    loading: MyLoadingComponent
});
const AsyncCheckAuth = Loadable({
    loader: () => import('./page/checkAuth/'),
    loading: MyLoadingComponent
});
const AsyncError= Loadable({
    loader: () => import('./page/error'),
    loading: MyLoadingComponent
});

const routes = [
                { path: '/', component: AsyncHome, exact: true },
                { path: '/login', component: AsyncLogin },
                { path: '/welcome', component: AsyncWelcome },
                { path: '/store', component: AsyncStore },
                { path: '/user', component: AsyncUser }
            ]


ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <div className="router-page">
       
                   <Switch>
                    {
                        routes.map(route => (
                            <Route key={route.path} path={route.path} component={route.component}  exact={route.exact} />
                        ))
                    }
                    <Route component={ Error } />
                </Switch>
            </div>
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);
registerServiceWorker();