React Routerにおけるナビゲーション状態

リスト内の製品をクリックすると、初めて製品ページが読み込まれる際には遅延が発生し、それ以降は速く表示されることがわかります。これは製品の追加や更新時にも同様で、クライアント側にキャッシュが存在するためです。

このレッスンでは、ページがどのような状態にあるかをユーザーに表示します。これを実現するために、フック useNavigation が役立ちます。このフックは、いくつかのプロパティを持つオブジェクトを返します。私たちが注目するのは、その中の1つ、プロパティ state です。

プロパティ state は 3 つの値を取ることができます: 'idle' (何も起こっていない状態), 'submitting' (POST、PUT、PATCH、DELETEによるフォーム送信時にルートの action が呼び出された状態), 'loading' (次のページをレンダリングするために、次のルートのローダーが呼び出された状態)。私たちは最後の値に注目します。

では、ファイル root.jsx に移動して、このフックをインポートしましょう:

import { useNavigation } from 'react-router-dom';

次に、フックの戻り値を受け取るために、関数 Root 内の return の前に変数 navigation を定義します:

const { products } = useLoaderData();
const navigation = useNavigation();

そして、そのプロパティ state を利用します。値が 'loading' の場合、製品データがレンダリングされている div にクラス loading を設定します:

<div id="product" className={navigation.state === 'loading' ? 'loading' : ''}>
	<Outlet />
</div>

あとは、 index.css にクラス loading のスタイルを追加するだけです。読み込み状態の場合、単純に opacity を下げましょう:

div.loading {
	opacity: 0.3;
}

これで、サイトをリロードしてリスト内の製品をクリックしたり、新しい製品を追加したりすると、次のページが表示される前に現在のページが一瞬暗くなることが確認できます。

これまでのレッスンの課題で作成したアプリケーションを使用してください。レッスンの内容を参考に、フック useNavigation を使って、次の学生データページが読み込まれていることをユーザーが確認できるようにしてください。