React Routerin lataajan saamien tietojen käyttö

Edellisellä oppitunnilla saimme tiedot tallennustilasta käyttämällä loader. Jotta voimme hyödyntää näitä tietoja, käytämme useLoaderData -hookkia. Avataan tiedosto root.jsx ja lisätään hookki importtiin:

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

Root-funktiossa saamme nyt tiedot vakioon products ja työskentelemme sen kanssa. Jos meillä on tuotteita, lista näytetään, jos ei, niin tulostamme kappaleeseen 'no products here ...'. nav -tagissa käytämme nyt vakiopykälää saadun tuotelistan tulostamiseen. Jokainen elementti kääritään Link -komponenttiin ja osoite on jokaisella oma (puhumme tästä myöhemmin). Vastaavasti, jos tuotteella ei ole nimeä, tulostuu oletuksena 'Unnamed'. Joten, ottaen huomioon edellä mainitun, nyt koodimme Root -funktiolle on tällainen:

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

Jos käynnistämme sovelluksen nyt uudelleen ja menemme etusivulle, näemme vain 'no products here ...', koska emme ole vielä laittaneet mitään tuotteita tallennustilaan.