使用react-loadable设置组件的路线

Question

我正在尝试使用react-loadable动态导入组件。

我有一个这样的配置文件：

Manifest.ts

export let manifest = {
  apps: [
    {
      componentPath: "/Test/App",
      path: "/test",
      name: "Test"
    },
   ...more objects for other apps
  ]
};

我有一个 AppRoutesList.tsx 文件，其中我使用react-loadable来注册组件的路由。

export default function AppRoutesList() {
   const LoadableComponent = (path: string) =>
    Loadable({
      loader: () => import(path),
      loading: () => <div>Loading</div>
    });

  return (
    <React.Fragment>
      {manifest.apps.map(app => (
        <RedirectIfAuthenticated
          key={app.name.toString()}
          path={app.path}
          component={LoadableComponent(`../${app.appPath}`)}
          redirectPath={"/"}
          isAuthenticated={true}
        />
      ))}
    </React.Fragment>
  );
}

因此对于上述配置，它应该注册/ test路径以在位置“ ./Test/App.tsx”处加载组件（默认导出）

但是当我执行此路线时，我只会看到“正在加载”文本。在chrome inspector中，我看到道具被传递到RedirectIfAuthenticated组件，而组件道具没有被传递：

这意味着我的LoadableComponent没有在这里返回实际的组件。我不确定如何解决此问题。谢谢。

其他信息：

RedirectIfAuthenticated 组件具有以下代码：

interface IRedirectIfAuthenticatedProps extends RouteProps {
  readonly isAuthenticated: boolean;
  readonly redirectPath: string;
  readonly component: React.ComponentClass<any> | React.StatelessComponent<any>;
}

export default function RedirectIfAuthenticated({
  component,
  redirectPath,
  isAuthenticated,
  ...rest
}: IRedirectIfAuthenticatedProps) {
  const Component = component;

  // tslint:disable-next-line:no-any
  const render = (renderProps: RouteComponentProps<any>) => {
    let element = <Component {...renderProps} />;

    if (!isAuthenticated) {
      element = (
        <Redirect
          to={{
            pathname: redirectPath,
            state: { from: renderProps.location }
          }}
        />
      );
    }

    return element;
  };

  return <Route {...rest} render={render} />;
}