Javascript 不希望服务器HTML包含<；部门>；在<；main>；

我在一个项目中工作，该项目使用：

• 反应-dom@16.9.0
• @可加载/组件
• 样式化组件
• 反应路由器dom

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

我使用

@loadable/component

以这种方式动态拆分代码

路由器.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

---

似乎与

@loadable/component

有关，但我不是100%确定。

我认为问题在于您的

NotFound

组件未加载，因此

路由

不知道要渲染什么，这是导致错误的原因

您需要修改如下内容：

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

}/>

终于有了答案：

要使

@loadable/component

正常工作，您需要以这种方式将magic webpack注释（

/*webpackChunkName:“notfound”*/

）放在文件路径之前

参考：

更重要的是，在服务器端，您需要将应用程序包装在

ChunkExtractorManager

中，并传递客户端提取器（我传递的是服务器提取器，文档中不太清楚）

const statsFile=path.resolve（'./wwwroot/dist/loadable stats.json'）
const extractor=新的ChunkExtractor（{
statsFile，
entrypoints:['client']//正确的Web包终结点的名称（默认值：main）
})

更新日期：2019年9月24日

添加到官方文件中

@loadable
用于SSR，这意味着您的页面在服务器端编译并作为HTML发送到客户端是的，HTML不会发送到客户端，而是作为响应发送到浏览器。但是，是的，我的问题是动态导入的问题。
NotFound
组件在服务器和客户机中呈现得非常完美，正如我所说，输出是相同的。这就是为什么我想知道为什么当我添加dynamic import时不起作用，而当我删除它们时却起作用。这与路由器无关，否则不管有没有动态导入，如果有意义的话，它都无法工作。
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

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

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

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>