文本内容不匹配。React 16中的警告。

26

我想构建带有服务器端渲染的ReactJs应用程序。我的客户端和服务器入口点如下:

client.jsx

const store = createStore(window.__INITIAL_STATE__);

hydrate(
  <Provider store={store}>
    <BrowserRouter>{renderRoutes(routes)}</BrowserRouter>
  </Provider>,
  document.querySelector('#root')
);

server.jsx

const app = express();

if (isDev) {
  const webpack = require('webpack');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const config = require('../../webpack.config.js');
  const compiler = webpack(config);

  app.use(express.static('/public'));
  app.use(
    webpackDevMiddleware(compiler, {
      publicPath: config.output.publicPath,
      stats: 'errors-only',
    })
  );
}

app.get('*', (req, res) => {
  const helmet = Helmet.renderStatic();
  const htmlAttrs = helmet.htmlAttributes.toComponent();
  const bodyAttrs = helmet.bodyAttributes.toComponent();

  const context = {};
  const data = {};

  res.set('content-type', 'text/html');

  res.send(
    '<!DOCTYPE html>' +
      renderToString(
        <html {...htmlAttrs}>
          <head>
            {helmet.title.toComponent()}
            {helmet.meta.toComponent()}
            {helmet.link.toComponent()}
          </head>
          <body {...bodyAttrs}>
            <div id="root">
              <StaticRouter location={req.url} context={context}>
                {renderRoutes(routes)}
              </StaticRouter>
            </div>
            <script
              dangerouslySetInnerHTML={{
                __html: `window.__INITIAL_STATE__ = ${JSON.stringify(data)}`,
              }}
            />
            <script src="/public/vendor.js" />
            <script src="/public/app.js" />
          </body>
        </html>
      )
  );
});

组件:

home.jsx

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return <div>home</div>;
  }
}

export default Home;

当我修改我的组件Home并刷新浏览器页面时,会出现以下错误:

警告:文本内容不匹配。 服务器:“home” 客户端:“home1”

这是正常的,因为服务器呈现旧版本的代码。 如何重新加载服务器上的代码,以使客户端和服务器版本相同?


1
我遇到了一个非常相似的错误 - 在服务器端使用StaticRouter,在客户端使用BrowserRouter。我有很多路由,当我直接访问其中一个路由时(即不通过客户端路由),它可以正常工作,但是会出现JS错误。 - Finbar Maginn
3
以下是翻译的结果:这篇文章可能会对你有所帮助:https://tylermcginnis.com/react-router-server-rendering/文章中有一节涉及到和你同样的错误 - 只需要在页面上找到“Text content did not match”即可查看。 - joknawe
3个回答

33

如果您发现这个错误是因为您的客户端和服务器故意呈现不同的内容(比如服务器呈现出一个黑暗主题,在加载后被用户喜好替代),请使用suppressHydrationWarning来抑制错误。

例如:

<div suppressHydrationWarning>Ignore this</div>

谢谢,这很有帮助,非常简单 =D,谢谢 :D - locopump

3
这里的问题在于您的服务器端应用程序没有反映代码更改。要做到这一点,您需要将Express应用程序配置为Webpack入口。
简而言之,您需要两个Webpack配置,一个用于服务器端代码,另一个用于客户端代码。 服务器端的配置将类似于以下内容。
module.exports = {
  entry: {
    server: './server.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js'
  },
  target: 'node',
  node: {
    // Need this when working with express, otherwise the build fails
    __dirname: false,   // if you don't put this is, __dirname
    __filename: false,  // and __filename return blank or /
  },
  externals: [nodeExternals()], // Need this to avoid error when working with Express
  module: {
    rules: [
      {
        // Transpiles ES6-8 into ES5
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        // Loads the javacript into html template provided.
        // Entry point is set below in HtmlWebPackPlugin in Plugins 
        test: /\.html$/,
        use: [{loader: "html-loader"}]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./index.html",
      filename: "./index.html",
      excludeChunks: [ 'server' ]
    })
  ]
}

这里有一篇好的文章,详细解释了如何做到这一点。

1
当您启用优化中的自动缩小(HTML)时,Cloudflare将双空格替换为一个空格,但没有提及这一点。这可能会导致错误发生。请注意保留HTML标签。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接