I am using react-router v4
along side react-loadable
to async load matched routes.
<LayoutWrapper>
<Route
exact
path="/"
render={props =>
currentUser ? (
<AsycnExamplePage {...props} currentUser={currentUser} />
) : (
<AsycnExamplePage />
)}
/>
<Route
exact
path="/saved"
render={props => <AsycnExamplePage {...props} currentUser={currentUser} />}
/>
<Route
exact
path="/settings"
render={props => (
<AsycnExamplePage {...props} currentUser={currentUser} />
)}
/>
</LayoutWrapper>
AsycnExamplePage
is a component wrapped withLoadable
fromreact-loadable
, e.g:
Loadable({
loader: () => import("./index"),
loading: props => {
if (props.isLoading) {
NProgress.start();
}
return null;
},
});
Currently, as I route to a different page, react-router
will instantly match the route before the async route is resolve. Thereby showing the LoadingComponent
from react-loadable
.
How can I make it so that react-router
will only render the async component after the async component is resolved?
PS: I'm trying to create a page load effect similar to Youtube.