Reactjs '；加载…'；在“反应惰性/悬念”中的每个导航操作之间

我正在创建一个PWA。我用react中的lazy/suspent延迟加载react web应用程序的组件。我的App.js代码如下所示：

import React, { lazy, Suspense } from 'react';
import './style.css';
import { Switch, Route } from 'react-router-dom';

const Index = lazy(() => import('./components/Index'));
const Uptime = lazy(() => import('./components/Uptime'));
const Results = lazy(() => import('./components/Results'));
const Add = lazy(() => import('./components/Add'));
const Menu = lazy(() => import('./components/Menu'));

function App() {
  return (
    <div className="main-wrapper">
      <Suspense fallback={<div className="loading">Loading...</div>}>
        <Switch>
          <Route path="/" exact component={Index} />
          <Route path="/uptime" exact component={Uptime} />
          <Route path="/results/:q" exact component={Results} />
          <Route path="/add" exact component={Add} />
          <Route path="/:id" exact component={Menu} />
        </Switch>
      </Suspense>
    </div>
  );
}

export default App;

import React，{lazy，suspent}来自'React'；
导入“/style.css”；
从“react router dom”导入{Switch，Route}；
常量索引=惰性（（）=>导入（'./组件/索引'）；
const-Uptime=lazy（（）=>import（'./组件/Uptime'）；
constresults=lazy（（）=>import（'./组件/结果'）；
constadd=lazy（（）=>import（'./组件/Add'））；
const Menu=lazy（（）=>import（'./组件/菜单'）；
函数App（）{
返回(
);
}
导出默认应用程序；

如您所见，我有一个带有“Loading…”的div占位符，当组件尚未完全加载时，它将显示为“Loading indicator”

我遇到的唯一（次要）问题是，当我在两条路线之间导航时，我总是会再次遇到这个“加载…”-div，仅在一瞬间，但它让我感到困扰

---

我是否正确地实现了这个惰性/悬念代码？

它正在加载组件，以便。。。