reactjs - react 16 : Warning: Expected server HTML to contain a matching <div> in <div> due to State

Question

我使用 SSR 时遇到以下错误

Warning: Expected server HTML to contain a matching <div> in <div>.

当检查组件安装时的浏览器宽度，然后设置组件的状态以呈现其移动版本时，问题出现在客户端。

但是服务器默认容器的桌面版本，因为它不知道浏览器宽度。

遇到这样的情况我该如何处理？我可以以某种方式检测服务器上的浏览器宽度并在发送到客户端之前渲染移动容器吗？

编辑:现在我决定在组件安装时渲染容器。这样，服务器端和客户端最初都不会呈现任何内容来阻止此错误。

我仍然愿意接受更好的解决方案

Answer 1

这将解决问题。

// Fix: Expected server HTML to contain a matching <a> in
const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate;
renderMethod(
  <BrowserRouter>
    <RoutersController data={data} routes={routes} />
  </BrowserRouter>,
  document.getElementById('root')
);