reactjs - 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>

• AsycnExamplePageLoadable是一个用from包裹的组件react-loadable，例如：

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

目前，当我路由到不同的页面时，react-router将在异步路由解析之前立即匹配路由。从而显示LoadingComponentfrom react-loadable。

我怎样才能使它react-router只在异步组件被解析后才呈现异步组件？

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