当我使用react-universal-component组件时，热模块更换停止工作

Question

routes.js

// @flow
import React from 'react';
import { hot } from 'react-hot-loader';
import universal from 'react-universal-component';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Switch } from 'react-router';

const importDynamicRoutes = ({ page }) => import(`./components/${page}`);
const UniversalComponent = universal(importDynamicRoutes);

const Routes = () => (
  <Router>
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About Me</Link>

      <Switch>
        <Route exact path="/">
          <UniversalComponent page="counter" />
        </Route>

        <Route exact path="/about">
          <UniversalComponent page="about_me" />
        </Route>
      </Switch>
    </div>
  </Router>
);

export default hot(module)(Routes);

app.js

// @flow
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';
import { AppContainer } from 'react-hot-loader';
import storeOptions from 'src/configStore';
import Routes from 'src/routes';
import './styles/main.pcss';

const { store, persistor } = storeOptions;

const root = document.getElementById('react-root');

function render(Component) {
  if (root !== null) {
    ReactDOM.render(
      <AppContainer>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <Component />
          </PersistGate>
        </Provider>
      </AppContainer>,
      root
    );
  }
}

render(Routes);

if (module.hot) {
  module.hot.accept('./routes.js', () => {
    const HotLoadRoutes = require('./routes.js').default;

    render(HotLoadRoutes);
  });
}

.babelrc

{
  "presets": [["env", { "modules": false }], "react"],
  "plugins": [
    "react-hot-loader/babel",
    "transform-runtime",
    "transform-object-rest-spread",
    "universal-import",
    "syntax-dynamic-import",
    [
      "react-css-modules",
      // https://github.com/gajus/babel-plugin-react-css-modules
      /**
       * babel-plugin-react-css-modules isn't very good at
       * respecting your Webpack resolver roots.
       * Hence, it's best to use relative paths when referring to .less files.
       */
      {
        "exclude": "node_modules",
        "webpackHotModuleReloading": true,
        "handleMissingStyleName": "warn",
        "filetypes": {
          ".pcss": {
            "syntax": "postcss-scss"
          }
        }
      }
    ]
  ]
}

如果我更改

<Route exact path="/counter">
  <UniversalComponent page="about_me" />
</Route>

到

// Import the Counter component
<Route exact path="/counter" component={Counter} />

热模块更换开始工作。任何帮助将不胜感激。