使用React.lazy懒加载组件跳转时出现闪烁该如何解决？

问题根因 #

你当前的核心问题是重复创建了Page3的懒加载实例，导致预加载逻辑完全失效：
你在App.js和Page2.js中分别调用ReactLazyPreload创建了两个完全独立的Page3组件实例，Page2中调用preload预加载的是自身声明的实例，和App路由中实际渲染的Page3不是同一个对象，跳转时App中的Page3仍需要重新加载，因此会触发Suspense的fallback，出现闪烁。

解决方案 #

步骤1：统一懒加载组件声明 #

将所有懒加载组件的声明抽为公共模块，保证全局共用同一个实例：
在src/components/下新建lazyComponents.js文件：

// src/components/lazyComponents.js
import { ReactLazyPreload } from '../utils/Functions';
export const Page3 = ReactLazyPreload(() => import(/* webpackChunkName: "page-3" */ './Page3'));

步骤2：修改App.js，调整Suspense位置 #

将Suspense移到Switch外层，避免路由切换时Suspense重复挂载触发不必要的fallback，同时从公共模块导入Page3：

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Page3 } from './components/lazyComponents';
import './App.css';

import Page1 from './components/Page1';
import Page2 from './components/Page2';

function App() {
  return (
    <Router history={window.history}>
      <Suspense fallback={"Loading"}>
        <Switch>
          <Route exact path="/" component={Page1} />
          <Route path="/page-2" component={Page2} />
          <Route path="/page-3" component={Page3} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

步骤3：修改Page2.js，复用公共懒加载实例 #

不再单独创建Page3实例，直接从公共模块导入，还可以可选添加加载状态判断，彻底避免未加载完成时跳转触发fallback：

import React from 'react';
import { Page3 } from './lazyComponents';

class Page2 extends React.Component {
  state = {
    page3Loaded: false
  }
  componentDidMount() {
    // 预加载完成后标记状态
    Page3.preload().then(() => {
      this.setState({ page3Loaded: true })
    });
  }

  handleNext = (e) => {
    e.preventDefault();
    // 保证加载完成后再跳转
    if (this.state.page3Loaded) {
      this.props.history.push('/page-3');
    } else {
      Page3.preload().then(() => {
        this.props.history.push('/page-3');
      })
    }
  };

  render() {
    return (
        <>
        <h1>Page 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida leo in pharetra sagittis. Donec sed tempus ex, nec rhoncus justo. Phasellus auctor diam eleifend, vestibulum justo ac, ultrices ipsum. Donec pretium augue ante, eget eleifend mi vehicula eu. Donec vitae sem erat. Vestibulum tincidunt suscipit ex, vitae condimentum odio ornare in. Vestibulum erat neque, semper sit amet suscipit vel, malesuada in diam. Morbi ut eros eget lectus sodales rhoncus.</p>
        <div style={{ textAlign: 'center' }}>
          {/* 未加载完成时可选择禁用按钮，避免用户提前点击 */}
          <button type="button" onClick={this.handleNext} className="button-next" disabled={!this.state.page3Loaded}>NEXT</button>
        </div>
      </>
    )
  }
}

export default Page2;

修改完成后即可完全消除跳转闪烁问题。

内容的提问来源于stack exchange，提问作者Viewsonic