解決済み: ルーターの遅延ロードに反応する

React Router の遅延読み込みに関連する主な問題は、正しく実装されていないとパフォーマンスの問題が発生する可能性があることです。 遅延読み込みでは、各コンポーネントのコードを個別に読み込む必要があるため、最初のページ読み込み時間が長くなる可能性があります。 さらに、コンポーネントが頻繁に使用されない場合、まったくロードされない可能性があり、その結果、リソースが浪費されます。 最後に、遅延読み込みをサポートしていない古いブラウザーとの潜在的な互換性の問題があります。

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

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
 
function App() { 

  return ( 

    <Router> 

      <Suspense fallback={<div>Loading...</div>}>

        <Switch>  

          <Route exact path="/" component={Home} />  

          <Route path="/about" component={About} />  

          <Route path="/contact" component={Contact} />  

        </Switch>  

      </Suspense> 

    </Router>  ); } export default App;

1. 'react' から React, { Suspense } をインポートします。
// この行は、React ライブラリと Suspense コンポーネントを React ライブラリからインポートします。

2. import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// この行は、react-router-dom ライブラリから BrowserRouter、Route、および Switch コンポーネントをインポートします。

3. const Home = React.lazy(() => import('./Home'));
// この行は、React の遅延読み込み機能を使用して Home という名前の定数を作成し、このファイル (App コンポーネント) と同じディレクトリにあるファイルから Home という名前のコンポーネントを動的にインポートします。

4. const About = React.lazy(() => import('./About'));
// この行は、このファイル (アプリ コンポーネント) と同じディレクトリ内のファイルから About というコンポーネントを動的にインポートするために遅延読み込みを使用する About という定数を作成します。
const Contact = React.lazy(() => import('./Contact')); // この行は、遅延読み込みを使用して Contact という名前の定数を作成し、このファイル (App コンポーネント) と同じディレクトリにあるファイルから Contact という名前のコンポーネントを動的にインポートします。

5. 関数 App() { return ( // これは、以前にインポートされた Router タグでラップされた JSX コードを返すアロー関数です

6.読み込んでいます...