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:

import { 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:

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

Č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.

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva iz lekcije dodajte prikaz pridobljenih podatkov o študentih iz nalagalnika, kot je opisano v lekciji.