A betöltő által szerzett adatok használata a React Routerban

Az előző leckében adatokat kaptunk a tárolóból a loader segítségével. Ahhoz, hogy ezeket az adatokat felhasználhassuk, a useLoaderData hookot használjuk. Nyissuk meg a root.jsx fájlt és adjuk hozzá a hookot az importokhoz:

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

A Root függvényben most már az adatokat egy products konstansba kapjuk meg és már ezzel fogunk dolgozni. Ha van néhány termékünk, akkor a lista megjelenik, ha nincs, akkor kiírjuk a 'no products here ...' szöveget egy bekezdésben. A nav tagben most egy standard ciklust használunk a kapott termékek kiíratására. Minden elem egy Link komponensbe lesz becsomagolva és mindegyiknek saját címe lesz (erről később beszélünk). Ennek megfelelően, ha egy terméknek nincs neve, akkor az 'Unnamed' lesz az alapértelmezett. Tehát a fentieket figyelembe véve, a Root függvény kódja most így fog kinézni:

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

Ha most újraindítjuk az alkalmazást és a főoldalra megyünk, akkor csak a 'no products here ...' szöveget fogjuk látni, mivel még nem tettünk egyetlen terméket sem a tárolóba.

Vegyétek azt az alkalmazást, amit az előző leckékhez szóló feladatokban készítettetek. A lecke anyagát felhasználva adjátok hozzá a betöltőből kapott hallgatói adatok megjelenítését a leckében leírtak szerint.