Question

我们正在使用@ loadable-component，并且无法在服务器端渲染它们。问题是布局没有渲染

import { ChunkExtractor } from '@loadable/server';
app.get('/*', async (req, res) => {

const extractor = new ChunkExtractor({ statsFile });

const WrappedLayout = withRootQuery(withLayout(layouts));

const App = (
  <ApolloProvider client={client}>
    <StaticRouter context={context} location={req.url}>
      <WrappedLayout />
    </StaticRouter>
  </ApolloProvider>
);

renderToStringWithData(extractor.collectChunks(App))
  .then((content) => {
    if (context.url) {
      res.redirect(context.status ? context.status : 301, context.url);
      return;
    }
    const initialState = client.extract();
    const helmetData = Helmet.renderStatic();
    console.log(content);
    const html = (
      <Html
        content={content}
        state={initialState}
        helmetData={helmetData}
        linkTags={extractor.getLinkElements()}
        scriptTags={extractor.getScriptElements()}
        styleTags={extractor.getStyleElements()}
      />
    );
  })

export const withLayout = layouts => (props) => {
  // eslint-disable-next-line react/prop-types
  const { data, type } = props;
  let Layout;
  if (type) {
    Layout = getLayoutOfType(type, layouts);
  } else {
    Layout = getLayoutFromResponse(data, layouts);
  }
  console.log(Layout);
  return <Layout {...props} />;
};

export const layouts = {
    INDEX_PAGE: loadable(() => import('./components/atomic/templates/home')),
    ARTICLE: loadable(() => import('./components/atomic/templates/article')),
    BASIC_PAGE: loadable(() => import('./components/atomic/templates/page')),
    loading: loadable(() => import('./components/atomic/templates/loading')),
    notFound: loadable(() => import('./components/atomic/templates/not-found')),
    error: loadable(() => import('./components/atomic/templates/error-page')),
};

加载了loadable的布局可以在客户端上正确呈现，而不能在服务器上呈现

@ loadable / component无法在具有React的Express应用程序的服务器端呈现

0 个答案: