1

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

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

清单.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 检查器中，我看到 props 被传递给 RedirectIfAuthenticated 组件，而组件 prop 没有被传递： 在此处输入图像描述

这意味着我的 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} />;
}
4

0 回答 0