基于 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();