в «ответной загрузке» указан точный путь к компоненту? - PullRequest
Новая
       16

в «ответной загрузке» указан точный путь к компоненту?

0 голосов
/ 24 октября 2018

Я использую «реагирующую-загружаемую» в моем приложении для отложенной загрузки некоторых компонентов, которые я не хочу рендерить, при загрузке приложения, в настоящее время я следую за разбиением кода на основе маршрута.

Моя файловая структура:

enter image description here

Содержимое 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 экспортирует О компонент, выполняя это: 

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

, но когда в моем загружаемом компоненте я пишу это:

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

Выдает ошибку, поэтому мой вопрос заключается в том, что реагирующая система ожидает точный путь к компоненту, если нет, то как я могу экспортировать свой компонент About из index.js в загружаемый компонент.

вся кодовая база

Итак, когда я ленивыйзагрузите мой компонент следующим образом: 

 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)

1 Ответ

0 голосов
/ 24 октября 2018

Проблема в вашем export { default as About } from './About'; утверждении.Вы не экспортируете по умолчанию, поэтому, когда вы используете здесь свой оператор, он не видит по умолчанию: 

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

Когда загружаемый компонент пытается импортировать ваш компонент и инициализировать его с реакцией, он пытается это сделать.из экспорта по умолчанию ../ignitus-About/Components.Этого не существует.Как загрузчик должен знать, что вы хотите About, а не сказать Blog компонент из этого импорта?

Независимо от того, что ваш импорт может быть загружаемым, он должен быть одиночным компонент.Если у вас есть несколько компонентов, вам нужно использовать несколько реагирующих загрузок.

...