3

我有一个 99% 的通用样板。问题是当我在代码更改后热重新加载页面显示正确的输出时，但如果我刷新页面，我会收到这样的错误。

Warning: Text content did not match. Server: "HOME" Client: "HOM E"

服务器不会更新，但客户端会更新，即使在刷新时也是如此。

我不知道怎么了，我用谷歌搜索了很多:)

这是创建块的代码。

import { hot } from 'react-hot-loader';
import loadable from 'loadable-components';
const HomeBundle = loadable(() => import('./Home'), {
  modules: ['./Home']
})
export const Home = hot(module)(HomeBundle);
const AboutBundle  = loadable(() => import('./About'), {
  modules: ['./About'],

})
export const Home = hot(module)(AboutBundle);

这是服务器实现

const initialState = store.getState();

const Code = <Provider store={store}>
    <Router context={{}} location={req.url}>
      <App />
    </Router>
  </Provider>

  getLoadableState(Code).then(loadableState => {
    const html = renderToString(Code)

    const fullPage = renderFullPage(html, initialState, loadableState, headAssets, isDeveloping);
    res.status(200).send(fullPage);
  });

这是客户端入口点。

import React from 'react';
import { hydrate } from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
import App from '../shared/App';
import configureStore from './../shared/redux/store';
import { loadComponents } from 'loadable-components'

import('whatwg-fetch');
import("./styles/root.scss");

// Create Redux store with initial state
const preloadedState = window.__PRELOADED_STATE__
delete window.__PRELOADED_STATE__;
const store = configureStore(preloadedState);

loadComponents().then(() => {
  hydrate((
    <Provider store={store}>
      <Router>
        <App />
      </Router>
    </Provider>
 ), document.getElementById('root'));
})

如果有人知道如何解决这个问题，或者有任何想法，我将非常感激:)

4

0 回答 0