React + lazy loading is working
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
//react
|
||||
import React from 'react';
|
||||
import { BrowserRouter, Switch } from 'react-router-dom';
|
||||
|
||||
//library components
|
||||
import LazyRoute from './lazy-route';
|
||||
|
||||
//styling
|
||||
//TODO: styling import
|
||||
|
||||
//common components
|
||||
//TODO: header
|
||||
//TODO: footer
|
||||
|
||||
const App = props => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
<LazyRoute exact path='/' component={() => import('./pages/homepage')} />
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import { Route } from 'react-router-dom';
|
||||
import Loadable from 'react-loadable';
|
||||
|
||||
const Loading = props => {
|
||||
if (props.error) {
|
||||
return <p>{props.error}</p>;
|
||||
}
|
||||
|
||||
if (props.timedOut) {
|
||||
return (
|
||||
<div className='page'>
|
||||
<p>Page Timed Out</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (props.pastDelay) {
|
||||
return (
|
||||
<div className='page'>
|
||||
<p>Page Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const LazyRoute = lazyProps => {
|
||||
const component = Loadable({
|
||||
loader: lazyProps.component,
|
||||
loading: Loading,
|
||||
timeout: 10000
|
||||
});
|
||||
|
||||
return <Route {...lazyProps} component={component} />
|
||||
};
|
||||
|
||||
export default LazyRoute;
|
||||
@@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
const HomePage = props => {
|
||||
return <p>Hello world!</p>;
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
Reference in New Issue
Block a user