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

Question

我在一个使用以下项目的项目中工作：

• 反应/反应-dom@16.9.0

• @loadable/组件

• 样式组件

• 反应路由器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

加载页面时，此错误出现在控制台上，页面似乎闪烁了一秒钟。

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

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

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

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

我认为问题是您的NotFound组件未加载，因此Route不知道要渲染什么导致错误。您需要修改如下内容：<Route&nbsp;path="/404/"&nbsp;exact&nbsp;component={props&nbsp;=>&nbsp;<NotFound&nbsp;{...props}&nbsp;/>}&nbsp;/>