Использование реагирующей загрузки для настройки маршрутов для компонентов

Question

Я пытаюсь использовать реагирующая загрузка для динамического импорта компонентов.

У меня есть такой файл конфигурации:

Manifest.ts

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

У меня есть AppRoutesList.tsx файл, в котором я регистрирую маршруты для компонентов, используя реакционную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/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} />;
}