Last active
March 30, 2019 21:02
-
-
Save manivelarjunan/8fefda327f41331f3409e3a4e024a6fd to your computer and use it in GitHub Desktop.
Lazy loading component with suspence
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component, Suspense } from 'react'; | |
import { BrowserRouter, Route, NavLink } from 'react-router-dom'; | |
import Welcome from './containers/Welcome'; | |
import Home from './containers/Home'; | |
//import Details from './containers/Details'; | |
// Above import loads on load and adds dependencies globally. so it should be commented/removed for lazy loading component. | |
const Details = React.lazy(() => import('./containers/Details')); | |
// Lazy loading import doesn't allow Named component. | |
class App extends Component { | |
render() { | |
return ( | |
<BrowserRouter> | |
<React.Fragment> | |
<nav> | |
<NavLink to="/home">Home Page</NavLink> | | |
<NavLink to="/details">Details Page</NavLink> | |
</nav> | |
<Route path="/" component={Welcome} exact /> | |
<Route path="/home" component={Home} /> | |
<Route path="/details" | |
render={() => | |
<Suspense fallback={<span>I am working on it ...</span>}><Details /></Suspense>} | |
/> | |
</React.Fragment> | |
</BrowserRouter> | |
); | |
} | |
} | |
// fallback JSX code adds "I am working on it ..." text incase Details component failes to load. | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment