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

Question

我在一个使用以下项目的项目中工作：反应/反应-dom@16.9.0@loadable/组件样式组件反应路由器dom该应用程序呈现服务器端和客户端。我正在使用@loadable/component这种方式动态代码拆分。路由器.tsximport * 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像下面那样删除时，它可以工作并且错误消失了。路由器无负载.tsximport * 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

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

您需要修改如下内容：

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