Last active
March 30, 2019 22:11
-
-
Save manivelarjunan/92f6c12b46d012f6fe467f87c00d6979 to your computer and use it in GitHub Desktop.
lazy loading with hoc
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} from 'react'; | |
import { BrowserRouter, Route, NavLink } from 'react-router-dom'; | |
import Welcome from './containers/Welcome'; | |
import Home from './containers/Home'; | |
import asyncComponent from './containers/hoc/asyncComponent'; | |
//import Details from './containers/Details'; | |
const AsyncComponent = asyncComponent(() => { | |
// Pass the component which you want to load dynamically. | |
return import('./containers/Details'); | |
}); | |
// aync compoent returns some dynamically loaded 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" component={AsyncComponent}/> | |
</React.Fragment> | |
</BrowserRouter> | |
); | |
} | |
} | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment