javascript - 新しいページが React.lazy と React.Suspense で読み込まれるまで、現在のページをレンダリングしたままにします

Question

React ルーターを使用して、特定の URL に従ってさまざまなページをレンダリングしています。いいえ、React.lazyを使用してすべてのページ コンポーネントを遅延読み込みしたかったのです。

import React from "react";

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

const Page = React.lazy(() => {
  return import("./Page");
});

const App = () => {
  return (
    <Router>
      <React.Suspense fallback={<div>Loading page...</div>}>
        <Switch>
          <Route exact path="/">
            <h1>Home</h1>
            <Link to="/page">Go to another page</Link>
          </Route>

          <Route path="/page" component={Page} />
        </Switch>
      </React.Suspense>
    </Router>
  );
};

export default App;

これは非常にうまく機能しますが、に行くと/page、すべてHomeが消え、フォールバックLoading page...コンポーネントしか表示されません (ページが消えて、別のページがすぐに表示され、ユーザーにとって邪魔になります)。

これはのデフォルトの動作ですReact.Suspenseが、この場合、実際のホームページを画面に表示し、Loading page...メッセージを上部に表示し、Pageコンポーネントがロードされたら、それをレンダリングしてホームページを置き換える方法はありますか?