gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(App.js) code splitting with react-loadable

Browse Source
This commit is contained in:
xidedix 2018-11-19 18:00:09 +01:00
parent df3b3e220a
commit 2e8c6c16e0
1 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/App.js
View File

@ -1,25 +1,50 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom'; import { HashRouter, Route, Switch } from 'react-router-dom';
// import { renderRoutes } from 'react-router-config';
import Loadable from 'react-loadable';
import './App.scss'; import './App.scss';
// Containers const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
import { DefaultLayout } from './containers';
// Pages
import { Login, Page404, Page500, Register } from './views/Pages';
// import { renderRoutes } from 'react-router-config'; // Containers
const DefaultLayout = Loadable({
loader: () => import('./containers/DefaultLayout'),
loading
});
// Pages
const Login = Loadable({
loader: () => import('./views/Pages/Login'),
loading
});
const Register = Loadable({
loader: () => import('./views/Pages/Register'),
loading
});
const Page404 = Loadable({
loader: () => import('./views/Pages/Page404'),
loading
});
const Page500 = Loadable({
loader: () => import('./views/Pages/Page500'),
loading
});
class App extends Component { class App extends Component {
render() { render() {
return ( return (
<HashRouter> <HashRouter>
<Switch> <Switch>
<Route exact path="/login" name="Login Page" component={Login} /> <Route exact path="/login" name="Login Page" component={Login} />
<Route exact path="/register" name="Register Page" component={Register} /> <Route exact path="/register" name="Register Page" component={Register} />
<Route exact path="/404" name="Page 404" component={Page404} /> <Route exact path="/404" name="Page 404" component={Page404} />
<Route exact path="/500" name="Page 500" component={Page500} /> <Route exact path="/500" name="Page 500" component={Page500} />
<Route path="/" name="Home" component={DefaultLayout} /> <Route path="/" name="Home" component={DefaultLayout} />
</Switch> </Switch>
</HashRouter> </HashRouter>
); );
} }