相关疑难解决方法(0)

React 18：水合失败，因为初始 UI 与服务器上呈现的内容不匹配

我试图让SSR在我的应用程序中工作，但出现错误：

Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。

现场演示代码在这里。

问题的现场演示在这里（打开开发工具控制台查看错误）：

文件App.js

 import React from "react";

  class App extends React.Component {

  head() {
    return (
      <head>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <meta name="theme-color" content="#000000" />
        <title>React App</title>
      </head>
    );
  }

  body() {
    return (
      <body>
        <div className="App">
          <h1>Client says Hello World</h1>
        </div>
      </body>
    );
  }

  render() {
    return (
      <React.Fragment>
        {this.head()}
        {this.body()}
      </React.Fragment>
    )
  }
}
export default App;

Run Code Online (Sandbox Code Playgroud)