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

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

routes/product.jsximport { getProduct } from '../forStorage';

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

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

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

routes/product.jsximport { useLoaderData } from 'react-router-dom';

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

routes/product.jsxconst { product } = useLoaderData();

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

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

次に変更します：

routes/product.jsx<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と呼びましょう：

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

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

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

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