Wykorzystanie danych uzyskanych przez loader w React Router

W poprzedniej lekcji uzyskaliśmy dane z magazynu za pomocą loader. Aby skorzystać z tych danych, użyjemy hooka useLoaderData. Otwórzmy plik root.jsx i dodajmy hook do importu:

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

W funkcji Root będziemy teraz otrzymywać dane do stałej products i pracować już z nią. Jeśli mamy jakieś produkty, to lista się wyświetli, jeśli nie, to wypiszemy w akapicie 'no products here ...'. W tagu nav używamy teraz standardowej pętli do wypisania uzyskanych produktów. Każdy element będzie owinięty w komponent Link i adres będzie każdy swój (o tym porozmawiamy później). Odpowiednio, jeśli produkt nie ma nazwy, to wypisze się 'Unnamed' domyślnie. A zatem, biorąc pod uwagę powyższe, teraz nasz kod dla funkcji Root będzie taki:

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>
  );
}

Jeśli teraz uruchomimy ponownie aplikację i wejdziemy na stronę główną, to zobaczymy tylko 'no products here ...', ponieważ żadnych produktów w magazynie jeszcze nie umieściliśmy.