componentDidMount неожиданно вызывается после перехода от react-loadable к react.lazy

Question

В моем проекте я полагался на react-loadable, чтобы выполнить некоторое разделение кода, ленивую загрузку вместе с response-router. Что-то типа:

<Route component={component} />

с участием

Component = Loadable({
    loader: () => import(/* webpackChunkName: "Analyze" */ "./components/Analyze"),
})

Компонент Analyze реализует componentDidMount и использовать роутер history.pushоб изменении состояния. Когда добавляется новый URL с измененным параметром, но по-прежнему ведется к тому же компоненту "Анализ", толькоcomponentDidUpdateназывается. Я обновил этот код, чтобы использовать React.lazy:

<Route component={(_props: any) =>
          <LazyComponentWrapper>
              <Component {..._props} />
          </LazyComponentWrapper>
        } />

с участием

Component = React.lazy(() => import(/* webpackChunkName: "Analyze" */ "./components/Analyze")),

а также

function LazyComponentWrapper({ children }) {
  return (
    <Suspense fallback={<div>{LOADING}</div>}>
        {children}
    </Suspense>
  );

но сейчас componentDidMoundнеожиданно вызывается каждый раз. Мне не ясно, связано ли это сReact.lazyили с реактивным маршрутизатором. Есть подсказка?

Answer 1

Согласно документам, возможно, лучше переместить Suspense из компонента Route, попробуйте следующее:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const Component = React.lazy(() => import(/* webpackChunkName: "Analyze" */ "./components/Analyze"))

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/analyze" component={Component}/>
      </Switch>
    </Suspense>
  </Router>
);