React RouterでURLパラメータからローダーデータを取得する方法

前回のレッスンでは、商品ページのデータを取得する関数を作成しました。ファイルproduct.jsxでgetProductをインポートしましょう：

import { getProduct } from '../forStorage';

インポートの後、Product関数の前にloader関数を記述します。 URLパラメータを渡しましょう：

export async function loader({ params }) {
	const product = await getProduct(params.productId);
	return { product };
}

また、ローダーで取得したデータを使用するために、フックuseLoaderDataをインポートします：

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

useLoaderDataを適用し、それに応じて Product関数の先頭にあるproductオブジェクトを作成する行を次のように置き換えます：

const { product } = useLoaderData();

もちろん、古いproductオブジェクトを削除したので、マークアップも少し変更します。段落の内容を置き換えます：

<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

次に変更します：

<p>Name: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Amount: {product.amount ? product.amount : <i>unknown</i>}</p>

あとはmain.jsxを開き、そこにloaderをインポートするだけです。これをproductLoaderと呼びましょう：

import Product, {
	loader as productLoader,
} from './routes/product';

そして、商品ページのルートオブジェクトのローダーとして指定し、 children内のelementプロパティの後に追加します：

children: [
	{
		path: 'products/:productId',
		element: <Product />,
		loader: productLoader,
	},
],

以上で、商品ページのデータ読み込みについて説明しました！ただし、今のところ読み込むものは何もありません。アプリケーションを起動し、商品を追加してリスト内でクリックし、すべてが機能していることを確認してください。

過去のレッスンの課題で作成したアプリケーションを使用してください。レッスンの内容を参考に、loaderを実装し、接続し、学生ページのデータとしてそれらのデータを利用してください。