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

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

routes/root.jsximport { Outlet, Link, useLoaderData } from 'react-router-dom';

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

root.jsxfunction 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 ...'という表示のみが確認できるでしょう。