Использование react-loadable для настройки маршрутов для компонентов

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

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

Manifest.ts

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

У меня есть файл AppRoutesList.tsx, в котором я регистрирую маршруты для компонентов, используя response-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 я вижу, что реквизиты передаются компоненту RedirectIfAuthenticated, а свойство компонента не передается: Использование react-loadable для настройки маршрутов для компонентов

Это означает, что мой 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} />;
}

Я не думаю, что динамический путь работает как import (path),

fiddlest 29.11.2018 19:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
379
0

Другие вопросы по теме