Používanie údajov získaných loaderom v React Router

V predchádzajúcej lekcii sme získali údaje z úložiska pomocou loader. Aby sme mohli tieto údaje použiť, použijeme hook useLoaderData. Otvorme súbor root.jsx a pridajme hook do importu:

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

Vo funkcii Root budeme teraz získavať údaje do konštanty products a pracovať už s ňou. Ak máme nejaké produkty, zoznam sa zobrazí, ak nie, vypíšeme do odseku 'no products here ...'. V tagu nav teraz používame štandardný cyklus na výpis získaných produktov. Každý prvok bude obalený v komponent Link a adresa bude každý svoj (o tom si povieme neskôr). Ak teda produkt nemá názov, vypíše sa 'Unnamed' ako predvolený. Takže, berúc do úvahy vyššie uvedené, teraz bude náš kód pre funkciu Root takýto:

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

Ak teraz reštartujeme aplikáciu a prejdeme na domovskú stránku, uvidíme iba 'no products here ...', pretože žiadne produkty do úložiska sme zatiaľ nepridali.

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Použite materiály z lekcie a pridajte zobrazenie údajov o študentoch získaných z loadera, ako je popísané v lekcii.