Uporaba podatkov, pridobljenih z nalagalnikom v React Router

V prejšnji lekciji smo pridobili podatke iz shrambe z uporabo loader. Za uporabo teh podatkov bomo uporabili kavelj useLoaderData. Odprimo datoteko root.jsx in dodajmo kavelj v uvoz:

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

V funkciji Root bomo zdaj pridobili podatke v konstanto products in delali z njo. Če imamo kakšne izdelke, se bo seznam prikazal, če ne, bomo v odstavku izpisali 'no products here ...'. V oznaki nav zdaj uporabimo standardno zanko za prikaz pridobljenih izdelkov. Vsak element bo zavito v komponento Link in naslov bo imel vsak svoj (o tem bomo govorili kasneje). V skladu s tem, če izdelek nima imena, bo privzeto prikazano 'Unnamed'. Torej, ob upoštevanju zgoraj navedenega, je zdaj naša koda za funkcijo Root takšna:

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

Če zdaj znova zaženemo aplikacijo in gremo na domačo stran, bomo videli samo 'no products here ...', saj še nismo dali nobenih izdelkov v shrambo.