0

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

我的文件结构：

在此处输入图像描述

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

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

这是我的延迟加载 AboutUs 组件的代码片段：

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

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

这index.js是通过执行此操作导出About组件：

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

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

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

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

整个代码库

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

 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)
4

1 回答 1

0

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

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

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

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

于 2018-10-24T14:46:42.227 回答