'react-loadable' 除了组件的确切路径吗？

Question

我在我的应用程序中使用“react-loadable”来延迟加载一些我不想在应用程序加载后立即呈现的组件，目前我正在遵循基于路由的代码拆分。

我的文件结构：

ignitus-About/Components/index.js的内容如下：

export { default as About } from './About';

这是我的懒加载 AboutUs 组件的代码 sn-p：

const AboutUs = Loadable({
  loader: () => import('../ignitus-About/Components/About'),
  loading: Loading,
});

但您会注意到，我正在编写 About 组件的确切/完整路径，但在我的 Components 目录中，我只有 2 个文件，一个是 index.js，另一个是 About.js。

这里index.js 正在通过这样做导出关于 组件：

export { default as About } from './About';

但是当我在我的可加载组件中写这个时：

 const AboutUs = Loadable({
      loader: () => import('../ignitus-About/Components'),
      loading: Loading,
    });

它会抛出一个错误，所以我的问题是 react-lodable 是否期望组件的确切路径，如果不是，那么我如何从可加载组件中的 index.js 导出我的 About 组件。

entire codebase

所以，当我像这样延迟加载我的组件时：

 const AboutUs = Loadable({
      loader: () => import('../ignitus-About/Components/About'),
      loading: Loading,
    });

效果很好。

如果我尝试像这样延迟加载：

 const AboutUs = Loadable({
      loader: () => import('../ignitus-About/Components'),
      loading: Loading,
    });

它抛出一个错误：

index.js:1452 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

    Check the render method of `LoadableComponent`.
        in LoadableComponent (created by Route)
        in Route (at publicRoutes.js:56)
        in Switch (at publicRoutes.js:41)
        in div (at publicRoutes.js:39)
        in PublicRoutes (created by Route)
        in Route (at App.js:36)
        in Switch (at App.js:34)
        in div (at App.js:25)
        in App (at src/index.js:29)
        in Router (created by BrowserRouter)
        in BrowserRouter (at src/index.js:28)
        in Provider (at src/index.js:27)

Answer 1

问题在于您的export { default as About } from './About'; 声明。你没有导出默认值，所以当你在这里使用你的语句时，它没有看到默认值：

loader: () => import('../ignitus-About/Components'),

当可加载组件尝试导入您的组件并使用 react 对其进行初始化时，它会尝试从 ../ignitus-About/Components 的默认导出中执行此操作。这不存在。加载程序应该如何知道您想要 About，而不是从这个导入中说出 Blog 组件？

无论您的导入是可加载的，它都必须是一个单个组件。如果您有多个组件，则需要使用多个 react-loadable。