Korišćenje podataka dobijenih loaderom u React Routeru

U prethodnoj lekciji smo dobili podatke iz skladišta pomoću loader. Da bismo iskoristili te podatke, koristićemo hook useLoaderData. Otvorimo fajl root.jsx i dodajmo hook u import:

import { Outlet, Link, useLoaderData } from 'react-router-dom';

U funkciji Root ćemo sada dobiti podatke u konstantu products i raditi sa njom. Ako imamo neke proizvode, lista će se prikazati, ako ne, prikazaćemo u paragrafu 'no products here ...'. U tagu nav sada koristimo standardnu petlju za prikaz dobijenih proizvoda. Svaki element će biti obavijen u komponentu Link i adresa će biti za svaki svoja (o tome ćemo govoriti kasnije). Shodno tome, ako proizvod nema naziv, prikazaće se 'Unnamed' podrazumevano. Dakle, uzimajući u obzir gore rečeno, sada će naš kod za funkciju Root biti ovakav:

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

Ako sada ponovo pokrenemo aplikaciju i odemo na početnu stranicu, videćemo samo 'no products here ...', pošto nismo još uvek stavili nijedan proizvod u skladište.

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći materijale lekcije, dodajte prikaz podataka o studentima dobijenih iz loadera, kao što je opisano u lekciji.