Почему загружаемые компоненты не загружаются в массив маршрутов рендеринга на стороне сервера?

Routes .js

  {
    component: loadable(() => import('../client/pages/signup/Signup')),
    path: "/signup/:page",
    exact: true
  },

Регистрация.js - это компонент класса, экспортируемый как:

export default {
  component: connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps
  )(PageSignup)
};

сервер / реакция / index.js:

const statsFile = path.resolve(
    process.cwd(), IS_DEV ? 'public/assets/loadable-stats.json' : 'assets/loadable-stats.json'
  );

  const MyApp = (
    <Provider store={store}>
      <StaticRouter location={url} context={context}>
        {renderRoutes(routes)}
      </StaticRouter>
    </Provider>
  )

  const webExtractor = new ChunkExtractor({ statsFile })
  const jsx = webExtractor.collectChunks(MyApp);
  const html = renderToString(jsx);

  const htmlString = template(store.getState(), config, html, Helmet.renderStatic(), res, analytics);


клиент / index.js:

const render = Component => {

  Component().then(ContainerComponent => {

    loadableReady(() => {

      hydrate(
        <AppContainer>
          <ContainerComponent
            history={history}
            store={store}
          />
        </AppContainer>,
        document.getElementById('mount')
      );

    });

  });
};
...
render();
...

если я перехожу на свою домашнюю / корневую страницу '/', она загружается нормально, как и следовало ожидать, но переход на эту страницу регистрации (/signup/welcome) вызывает ошибку:

react_devtools_backend.js:2273 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `InnerLoadable`.

Я предполагаю, что это потому, что я экспортирую PageSignup как object.component = <PageSignup { ...loadsOfReduxProps} />, или что-то? Но я попытался добавить.component вimport заявление и .default &, который вызывает другую ошибку ('... of undefined').

Как передать этот обещанный ленивый компонент в массив маршрутов, который обычно ожидает объект? И он ожидает объект, чтобы SSR мог запускать PageSignup.component.fetchData (статические методы).

Кажется, это обычная установка для SSR. Я чувствую, что почти все заработало, но что я делаю не так?

0 ответов

Другие вопросы по тегам