componentDidMount在从react-loadable移动到react.llazy后意外调用

Question

在我的项目中，我曾经依靠react loadable与react 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>
);

但是现在CCD_ 4每次都被意外地调用。我不清楚这是和React.lazy有关还是和react路由器有关。有线索吗？

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>
);