refactor(DefaultLayout) code splitting with React.lazy
- remove `react-loadable` - `Suspense` with routes, Aside, Footer, Header - add `onLogout` for DefaultHeader
This commit is contained in:
xidedix
parent
2e8c6c16e0
commit
f0bcbabab5
@ -65,7 +65,7 @@ class DefaultHeader extends Component {
|
||||
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
|
||||
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
|
||||
<DropdownItem onClick={e => this.props.onLogout(e)}><i className="fa fa-lock"></i> Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</AppHeaderDropdown>
|
||||
</Nav>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component, Suspense } from 'react';
|
||||
import { Redirect, Route, Switch } from 'react-router-dom';
|
||||
import { Container } from 'reactstrap';
|
||||
|
||||
@ -18,46 +18,70 @@ import {
|
||||
import navigation from '../../_nav';
|
||||
// routes config
|
||||
import routes from '../../routes';
|
||||
import DefaultAside from './DefaultAside';
|
||||
import DefaultFooter from './DefaultFooter';
|
||||
import DefaultHeader from './DefaultHeader';
|
||||
|
||||
const DefaultAside = React.lazy(() => import('./DefaultAside'));
|
||||
const DefaultFooter = React.lazy(() => import('./DefaultFooter'));
|
||||
const DefaultHeader = React.lazy(() => import('./DefaultHeader'));
|
||||
|
||||
class DefaultLayout extends Component {
|
||||
|
||||
loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>
|
||||
|
||||
signOut(e) {
|
||||
e.preventDefault()
|
||||
this.props.history.push('/login')
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="app">
|
||||
<AppHeader fixed>
|
||||
<DefaultHeader />
|
||||
<Suspense fallback={this.loading()}>
|
||||
<DefaultHeader onLogout={e=>this.signOut(e)}/>
|
||||
</Suspense>
|
||||
</AppHeader>
|
||||
<div className="app-body">
|
||||
<AppSidebar fixed display="lg">
|
||||
<AppSidebarHeader />
|
||||
<AppSidebarForm />
|
||||
<Suspense>
|
||||
<AppSidebarNav navConfig={navigation} {...this.props} />
|
||||
</Suspense>
|
||||
<AppSidebarFooter />
|
||||
<AppSidebarMinimizer />
|
||||
</AppSidebar>
|
||||
<main className="main">
|
||||
<AppBreadcrumb appRoutes={routes}/>
|
||||
<Container fluid>
|
||||
<Switch>
|
||||
{routes.map((route, idx) => {
|
||||
return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
|
||||
<route.component {...props} />
|
||||
)} />)
|
||||
: (null);
|
||||
},
|
||||
)}
|
||||
<Redirect from="/" to="/dashboard" />
|
||||
</Switch>
|
||||
<Suspense fallback={this.loading()}>
|
||||
<Switch>
|
||||
{routes.map((route, idx) => {
|
||||
return route.component ? (
|
||||
<Route
|
||||
key={idx}
|
||||
path={route.path}
|
||||
exact={route.exact}
|
||||
name={route.name}
|
||||
render={props => (
|
||||
<route.component {...props} />
|
||||
)} />
|
||||
) : (null);
|
||||
})}
|
||||
<Redirect from="/" to="/dashboard" />
|
||||
</Switch>
|
||||
</Suspense>
|
||||
</Container>
|
||||
</main>
|
||||
<AppAside fixed>
|
||||
<DefaultAside />
|
||||
<Suspense fallback={this.loading()}>
|
||||
<DefaultAside />
|
||||
</Suspense>
|
||||
</AppAside>
|
||||
</div>
|
||||
<AppFooter>
|
||||
<DefaultFooter />
|
||||
<Suspense fallback={this.loading()}>
|
||||
<DefaultFooter />
|
||||
</Suspense>
|
||||
</AppFooter>
|
||||
</div>
|
||||
);
|
||||
|
||||
217
src/routes.js
217
src/routes.js
@ -1,188 +1,41 @@
|
||||
import React from 'react';
|
||||
import Loadable from 'react-loadable'
|
||||
|
||||
import DefaultLayout from './containers/DefaultLayout';
|
||||
|
||||
function Loading() {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
const Breadcrumbs = Loadable({
|
||||
loader: () => import('./views/Base/Breadcrumbs'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Cards = Loadable({
|
||||
loader: () => import('./views/Base/Cards'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Carousels = Loadable({
|
||||
loader: () => import('./views/Base/Carousels'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Collapses = Loadable({
|
||||
loader: () => import('./views/Base/Collapses'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Dropdowns = Loadable({
|
||||
loader: () => import('./views/Base/Dropdowns'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Forms = Loadable({
|
||||
loader: () => import('./views/Base/Forms'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Jumbotrons = Loadable({
|
||||
loader: () => import('./views/Base/Jumbotrons'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const ListGroups = Loadable({
|
||||
loader: () => import('./views/Base/ListGroups'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Navbars = Loadable({
|
||||
loader: () => import('./views/Base/Navbars'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Navs = Loadable({
|
||||
loader: () => import('./views/Base/Navs'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Paginations = Loadable({
|
||||
loader: () => import('./views/Base/Paginations'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Popovers = Loadable({
|
||||
loader: () => import('./views/Base/Popovers'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const ProgressBar = Loadable({
|
||||
loader: () => import('./views/Base/ProgressBar'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Switches = Loadable({
|
||||
loader: () => import('./views/Base/Switches'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Tables = Loadable({
|
||||
loader: () => import('./views/Base/Tables'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Tabs = Loadable({
|
||||
loader: () => import('./views/Base/Tabs'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Tooltips = Loadable({
|
||||
loader: () => import('./views/Base/Tooltips'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const BrandButtons = Loadable({
|
||||
loader: () => import('./views/Buttons/BrandButtons'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const ButtonDropdowns = Loadable({
|
||||
loader: () => import('./views/Buttons/ButtonDropdowns'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const ButtonGroups = Loadable({
|
||||
loader: () => import('./views/Buttons/ButtonGroups'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Buttons = Loadable({
|
||||
loader: () => import('./views/Buttons/Buttons'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Charts = Loadable({
|
||||
loader: () => import('./views/Charts'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Dashboard = Loadable({
|
||||
loader: () => import('./views/Dashboard'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const CoreUIIcons = Loadable({
|
||||
loader: () => import('./views/Icons/CoreUIIcons'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Flags = Loadable({
|
||||
loader: () => import('./views/Icons/Flags'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const FontAwesome = Loadable({
|
||||
loader: () => import('./views/Icons/FontAwesome'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const SimpleLineIcons = Loadable({
|
||||
loader: () => import('./views/Icons/SimpleLineIcons'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Alerts = Loadable({
|
||||
loader: () => import('./views/Notifications/Alerts'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Badges = Loadable({
|
||||
loader: () => import('./views/Notifications/Badges'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Modals = Loadable({
|
||||
loader: () => import('./views/Notifications/Modals'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Colors = Loadable({
|
||||
loader: () => import('./views/Theme/Colors'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Typography = Loadable({
|
||||
loader: () => import('./views/Theme/Typography'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Widgets = Loadable({
|
||||
loader: () => import('./views/Widgets/Widgets'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Users = Loadable({
|
||||
loader: () => import('./views/Users/Users'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const User = Loadable({
|
||||
loader: () => import('./views/Users/User'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
|
||||
const Breadcrumbs = React.lazy(() => import('./views/Base/Breadcrumbs'));
|
||||
const Cards = React.lazy(() => import('./views/Base/Cards'));
|
||||
const Carousels = React.lazy(() => import('./views/Base/Carousels'));
|
||||
const Collapses = React.lazy(() => import('./views/Base/Collapses'));
|
||||
const Dropdowns = React.lazy(() => import('./views/Base/Dropdowns'));
|
||||
const Forms = React.lazy(() => import('./views/Base/Forms'));
|
||||
const Jumbotrons = React.lazy(() => import('./views/Base/Jumbotrons'));
|
||||
const ListGroups = React.lazy(() => import('./views/Base/ListGroups'));
|
||||
const Navbars = React.lazy(() => import('./views/Base/Navbars'));
|
||||
const Navs = React.lazy(() => import('./views/Base/Navs'));
|
||||
const Paginations = React.lazy(() => import('./views/Base/Paginations'));
|
||||
const Popovers = React.lazy(() => import('./views/Base/Popovers'));
|
||||
const ProgressBar = React.lazy(() => import('./views/Base/ProgressBar'));
|
||||
const Switches = React.lazy(() => import('./views/Base/Switches'));
|
||||
const Tables = React.lazy(() => import('./views/Base/Tables'));
|
||||
const Tabs = React.lazy(() => import('./views/Base/Tabs'));
|
||||
const Tooltips = React.lazy(() => import('./views/Base/Tooltips'));
|
||||
const BrandButtons = React.lazy(() => import('./views/Buttons/BrandButtons'));
|
||||
const ButtonDropdowns = React.lazy(() => import('./views/Buttons/ButtonDropdowns'));
|
||||
const ButtonGroups = React.lazy(() => import('./views/Buttons/ButtonGroups'));
|
||||
const Buttons = React.lazy(() => import('./views/Buttons/Buttons'));
|
||||
const Charts = React.lazy(() => import('./views/Charts'));
|
||||
const Dashboard = React.lazy(() => import('./views/Dashboard'));
|
||||
const CoreUIIcons = React.lazy(() => import('./views/Icons/CoreUIIcons'));
|
||||
const Flags = React.lazy(() => import('./views/Icons/Flags'));
|
||||
const FontAwesome = React.lazy(() => import('./views/Icons/FontAwesome'));
|
||||
const SimpleLineIcons = React.lazy(() => import('./views/Icons/SimpleLineIcons'));
|
||||
const Alerts = React.lazy(() => import('./views/Notifications/Alerts'));
|
||||
const Badges = React.lazy(() => import('./views/Notifications/Badges'));
|
||||
const Modals = React.lazy(() => import('./views/Notifications/Modals'));
|
||||
const Colors = React.lazy(() => import('./views/Theme/Colors'));
|
||||
const Typography = React.lazy(() => import('./views/Theme/Typography'));
|
||||
const Widgets = React.lazy(() => import('./views/Widgets/Widgets'));
|
||||
const Users = React.lazy(() => import('./views/Users/Users'));
|
||||
const User = React.lazy(() => import('./views/Users/User'));
|
||||
|
||||
// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
|
||||
const routes = [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user