Question

我正在使用以下项目：

react/react-dom@16.9.0
@ loadable / component
样式化组件
react-router-dom

该应用程序同时呈现服务器端和客户端端。

我正在使用@loadable/component通过这种方式动态地编码拆分。

router.tsx

import * as React from 'react'
import loadable from '@loadable/component'
import { Route, Switch } from 'react-router-dom'

const NotFound = loadable(() =>
  import('../components/NotFound/NotFound' /* webpackChunkName: "notfound" */)
)

const routes = (
  <Switch>
    <Route component={NotFound} />
  </Switch>
)

export default routes

加载页面时，此错误会出现在控制台上，并且页面似乎会滑动一秒钟。

react-dom.development.js:546 Warning: Did not expect server HTML to contain a <div> in <main>.

当我检查双方（服务器/客户端）的输出时，它们相同。

当我像下面这样删除@loadable/component时，它可以工作并且错误消失了。

router-without-loadable.tsx

import * as React from 'react'
import { Route, Switch } from 'react-router-dom'
import NotFound from '../components/NotFound/NotFound'

const routes = (
  <Switch>
    <Route component={NotFound} />
  </Switch>
)

export default routes

似乎与@loadable/component有关，但我不确定100％。

Answer 1

最后有一个答案：

要使@loadable/component正常工作，您需要以这种方式在文件路径之前放置魔术webpack注释（/* webpackChunkName: "notfound" */）。

const NotFound = loadable(() =>
  import(/* webpackChunkName: "notfound" */ '../components/NotFound/NotFound')
)

参考：

https://github.com/smooth-code/loadable-components/issues/23

更重要的是，在服务器端，您需要将应用程序包装在ChunkExtractorManager中，并通过客户端提取程序（我正在通过服务器提取程序，在文档中不是很清楚）。

const statsFile = path.resolve('./wwwroot/dist/loadable-stats.json')
const extractor = new ChunkExtractor({ 
  statsFile, 
  entrypoints: ['client'] // name of the proper webpack endpoint (default: main)
})

<ChunkExtractorManager extractor={extractor}>
  <App />
</ChunkExtractorManager>

以下是有关如何实现它的正确清晰的示例：

https://github.com/iamssen/seed

更新24.09.2019

已添加到官方文档

https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/#chunkextractor-entrypoints

Answer 2

我认为问题是您的NotFound组件未加载，因此Route不知道该渲染什么导致错误。

您需要修改以下内容：

<Route path="/404/" exact component={props => <NotFound {...props} />} />

没想到服务器HTML在<main>中包含<div>

2 个答案: