React Router v4显示当前路由组件，直到异步路由解析

Question

我在react-router v4旁边使用react-loadable来异步加载匹配的路由。

<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是一个由Loadable react-loadable包裹的组件，例如：

Loadable({
  loader: () => import("./index"),
  loading: props => {
    if (props.isLoading) {
      NProgress.start();
    }
    return null;
  },
});

目前，当我路由到不同的页面时，react-router会在异步路由解析之前立即匹配路由。从而显示LoadingComponent的{​​{1}}。

如何才能使react-loadable仅在解析异步组件后呈现异步组件？

PS：我正在尝试创建类似于Youtube的页面加载效果。