1

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 with Loadable from react-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.

cusX
  • 470
  • 1
  • 6
  • 17
  • I would guess that this is a feature/issue with Loadable. There may be a config option to turn this off. Or set the loading prop to null. – Garry Taylor Oct 22 '17 at 10:21

0 Answers0