Javascript 将hydrate（）与async一起使用。组件

我正在开发的应用程序基于React光纤和React路由器V3

尝试使用

hydrate（）

而不是

render（）

时，我遇到了以下问题：从SSR返回的HTML与客户端的HTML不同

结果，React重新装载整个DOM并抛出以下警告：

不希望服务器HTML包含…

React培训也不能提供解决方案：

有什么办法可以做到这一点吗

更新： 简单例子 （伪代码）

App.js:

export default () => <div>Lorem Ipsum</div>;

const createRoutes = store => ({
  path: '/',
  getComponent(nextState, cb) {
    require('./App'); // some async require
  },
  onEnter: (nextState, replace, cb) => {
    store.dispatch(fetchData())
      .then(() => cb())
      .catch(cb);
  }
});

match({history, routes: createRoutes(store)},
  (error, redirectLocation, renderProps) => {
  hydrate(
    <Router history={history} routes={createRoutes(store)} />,
    document.getElementById('app')
  );
});

export default（）=>Lorem Ipsum；

client.js:

export default () => <div>Lorem Ipsum</div>;

const createRoutes = store => ({
  path: '/',
  getComponent(nextState, cb) {
    require('./App'); // some async require
  },
  onEnter: (nextState, replace, cb) => {
    store.dispatch(fetchData())
      .then(() => cb())
      .catch(cb);
  }
});

match({history, routes: createRoutes(store)},
  (error, redirectLocation, renderProps) => {
  hydrate(
    <Router history={history} routes={createRoutes(store)} />,
    document.getElementById('app')
  );
});

const createRoutes=store=>({
路径：“/”，
getComponent（下一状态，cb）{
require（'./App'）；//一些异步require
},
onEnter:（下一个状态，替换，cb）=>{
dispatch（fetchData（））
.然后（（）=>cb（））
.渔获物（cb）；
}
});
匹配（{history，routes:createRoutes（store）}，
（错误、重定向位置、渲染器操作）=>{
水合物(
,
document.getElementById（'app'）
);
});

server.js

match({routes: createRoutes(store), location: req.url},
  (err, redirectLocation, renderProps) => {
  const content = renderToString(<RouterContext {...renderProps}/>);
  // send content to client
});

match（{routes:createRoutes（store），位置：req.url}，
（错误、重定向位置、渲染器操作）=>{
const content=renderToString（）；
//向客户端发送内容
});

我对这个问题进行了更深入的调查，并找到了解决方案。 要实现DOM水合作用，应在帐户中添加以下要点：

我在

client.js中调用了上述示例，调用了
createRoutes（store）
两次。这是多余的，因为
renderProps
已经为
组件准备了
routes
属性。由于这个错误，
onEnter
被调用了两次，所以数据获取也被执行了两次

为了避免服务器端和客户端数据的HTML不匹配，在第一次客户端渲染时不应调用onEnter中的数据获取

match

函数在渲染之前等待执行

getComponent

回调。所以主要的问题是错误的，因为这个功能是现成的

---

嗨，欢迎来到StackOverflow。请看。