React Routerのローダーで取得したデータの使用方法

前回のレッスンでは、 loaderを使用してストレージからデータを取得しました。このデータを実際に利用するには、フックuseLoaderDataを使用します。ファイルroot.jsxを開き、インポートにこのフックを追加しましょう:

import { Outlet, Link, useLoaderData } from 'react-router-dom';

Root関数内で、データを定数productsで受け取り、それを元に処理を行います。商品が存在する場合はリストを表示し、存在しない場合は、段落タグで'no products here ...'と表示します。 navタグ内では、取得した商品リストを標準的なループで出力します。各要素はLinkコンポーネントでラップされ、それぞれ独自のアドレスを持ちます（これについては後ほど説明します）。商品に名前がない場合は、デフォルトで'Unnamed'と表示されます。以上を踏まえると、Root関数のコードは以下のようになります:

function Root() {

	const { products } = useLoaderData();
	return (
		<div id="main">
			{products.length ? (
				<nav>
					{products.map((product) => (
						<Link key={product.id} to={`products/${product.id}`}>
							{product.name ? product.name : <i>Unnamed</i>}
						</Link>
					))}
				</nav>
			) : (
				<p><i>no products here ...</i></p>
			)}
			<div id="product">
				<Outlet />
			</div>
		</div>
	);
}

アプリケーションを再起動してメインページにアクセスすると、現時点ではストレージに商品データがまだ何も追加されていないため、 'no products here ...'という表示のみが確認できるでしょう。

これまでのレッスンの課題で作成したアプリケーションを使用してください。レッスンの内容に従って、ローダーから取得した学生データの表示を、レッスンで説明した通りに追加してください。