React Router с ошибкой загружаемых компонентов

Question

Я создал хранилище с базовым примером, который вызывает эту ошибку в случае, если она помогает:

loadable-components-ssr

Я пытаюсьиспользовать загружаемые компоненты в SSR, настроенном с react-router-dom 4.3.1, loadable-component 5.6.0 и react-dom 16.8.1

Вот пример компонента, к которому я пытаюсь применить loadable-component:

import React from "react";

const About = () => <h2>About</h2>;

export default About;

Это импортируется в компонент App следующим образом:

import loadable from "@loadable/component";
...
const About = loadable(() => import("./About"));

И передается в качестве опоры Route в том же компоненте App:

<Route path="/about/" component={About} />

Но я продолжаю получать следующее предупреждение в консоли инструментов разработчика:

Предупреждение: сбойный тип пропелла: недопустимая опора component типа object, поставляемая в Route, ожидается function

Если я использую альтернативный синтаксис, предложенный в первый ответ :

<Route path="/about/" component={props => <About {...props} />} />

Предупреждение исчезает, но маршрутна /about по-прежнему выдает ошибку при нажатии на ссылку:

Uncaught Error: Loading chunk About failed.
(missing: http://localhost:3000/about/About.bundle.js)
    at HTMLScriptElement.onScriptComplete (VM1805 app.bundle.js:114)

Я следовал документации о настройке loadable-components в SSR,поэтому я настроил клиента, сервер и плагин babel, как указано.

Есть идеи, что здесь не так?

Answer 1

почему бы вам не использовать реаги.лазы ?Это официальный компонент.

const About = React.lazy(() => import('./About')
<Route exact path="/about" component={props => <About {...props} />} />

Answer 2

Это известная проблема реагирующего маршрутизатора .

Я думаю, что вы могли бы кодировать маршрут следующим образом:

<Route path="/about/" component={props => <About {...props} />} />

Будьте осторожны с этой реализацией,потому что вы могли бы иметь некоторые ошибки поведения при повторных рендерах.