解決済み: 反応ルーター v6 レイジー サスペンス

React Router v6 レイジー サスペンスに関連する主な問題は、すべてのブラウザーでまだ完全にサポートされていないことです。 これは、ユーザーが React Router v6 レイジー サスペンスを使用して Web サイトの特定のページまたは機能にアクセスしようとすると、問題が発生する可能性があることを意味します。 さらに、実稼働環境で使用する前に対処する必要があるバグやパフォーマンスの問題がまだいくつかあります。 最後に、Suspense でコンポーネントを遅延読み込みするための API はまだ初期段階にあり、既存のアプリケーションとの互換性を確保するには追加の開発時間が必要になる場合があります。

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 AppRouter() { 

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

1. このコードは、React ライブラリと、React から Suspense コンポーネントをインポートし、react-router-dom から BrowserRouter、Route、および Switch コンポーネントをインポートします。
2. 次に、React の遅延読み込み機能を使用して XNUMX つのコンポーネント (Home、About、Contact) を定義し、それぞれのファイルからそれらをインポートします。
3. AppRouter 関数が定義されています。この関数は、内部に Switch コンポーネントを持つ Suspense コンポーネントを含む Router コンポーネントを返します。
4. Switch コンポーネントの内部には XNUMX つの Route コンポーネントがあり、それぞれのパスが URL で一致すると、インポートされたコンポーネントの XNUMX つをレンダリングします (例: Home の「/」)。
5. 最後に、AppRouter をエクスポートして、アプリケーションの他の場所で使用できるようにします。

反応ルーターv6で遅延読み込みをどのように使用しますか?

v6

遅延読み込みは、必要になるまで特定のコンポーネントの読み込みを遅らせるために使用される手法です。 React Router v6 では、動的な import() 構文を使用して遅延読み込みを実現できます。 この構文を使用すると、コードを複数のバンドルに分割して、オンデマンドまたは並列でロードできます。 これにより、最初のバンドル サイズが小さくなり、パフォーマンスが向上します。 React Router v6 で遅延読み込みを使用するには、動的 import() 呼び出しで遅延読み込みするコンポーネントをラップする必要があります。 import() 呼び出しは、コンポーネントがロードされ、レンダリングの準備が整ったときに解決される promise を返します。

反応におけるサスペンスと怠惰とは

React Router の Suspense は、何らかの条件が満たされるまでルートの読み込みを遅らせる方法です。 これは、必要なときにのみルートをロードすることで、アプリケーションのパフォーマンスを向上させるために使用できます。 たとえば、ユーザーが認証を必要とするページに移動している場合、認証が完了するまでルートが遅延する可能性があります。

React Router の遅延読み込みにより、コンポーネントを一度にすべて読み込むのではなく、必要なときに非同期で読み込むことができます。 これにより、必要なときにのみコンポーネントをロードすることでパフォーマンスが向上し、ネットワーク経由で転送する必要があるデータの量が削減されます。 遅延読み込みはコードの分割にも役立ち、大規模なアプリケーションを必要に応じて読み込むことができる小さなチャンクに分割できるようにします。

関連記事：

コメント