小编Mic*_*ngo的帖子

当我在服务器端呈现同步路由，然后客户端对 dom 进行水合时，我收到警告，因为客户端异步路由找不到组件。

另一方面，反应纤维和解试图去除这个不可水合的节点。所以该页面在客户端产生一个空白的闪光:(

根据下一个屏幕截图，服务器端渲染生成的节点将被删除。这个节点（div.home-page）是当前路由的动态组件

那么，如何告诉reconciler不要移除这个节点，因为它会被动态导入的对应组件补水呢？

一些代码片段以获得更多解释

路线定义

import {
  HomePage,
} from '../bundles/Bundles';

export default [
  {
    component: HomePage,
    path: '/',
    exact: true,
    strict: true,
  },
];

服务器端使用的 Bundles.js

export const HomePage = syncComponent('HomePage', require('../views/HomePage/HomePage'));

客户端使用的 AsyncBundles.js

export const HomePage = asyncComponent('HomePage', () => Promise.all([
  import('../views/HomePage/HomePage' /* webpackChunkName: 'HomePage' */),
  importCss('HomePage'),
]));

感谢NormalModuleReplacementPlugin webpack 插件，我可以从 Bundles.js 和 AsyncBundles.js 切换到服务器和客户端渲染

new webpack.NormalModuleReplacementPlugin(/Bundles\.js/, 'AsyncBundles.js')

HomePage.js 组件渲染一个简单的 div

<div className="home-page">Home Page</div>

渲染路由的主要 Wrapper.js

  <Route
    render={({ location }) => (
      <div className="app__wrapper"> …