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

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

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

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

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

routes/root.jsximport { useNavigation } from 'react-router-dom';

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

routes/root.jsxconst { products } = useLoaderData();
const navigation = useNavigation();

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

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

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

index.cssdiv.loading {
  opacity: 0.3;
}

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