Я пытаюсь использовать реагирующий для динамического импорта компонентов.
У меня есть такой конфигурационный файл:
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, а свойство компонента не передается:

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