Utilizarea datelor obținute de încărcător în React Router

În lecția precedentă am obținut date din depozit folosind loader. Pentru a utiliza aceste date, vom folosi hook-ul useLoaderData. Să deschidem fișierul root.jsx și să adăugăm hook-ul în import:

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

În funcția Root vom obține acum datele în constanta products și vom lucra deja cu ea. Dacă avem niște produse, atunci lista se va afișa, dacă nu, atunci vom afișa în paragraf 'no products here ...'. În tag-ul nav folosim acum o buclă standard pentru afișarea produselor obținute. Fiecare element va fi înfășurat în componenta Link și adresa va fi proprie fiecăruia (despre asta vom vorbi mai târziu). În consecință, dacă produsul nu are nume, atunci se va afișa 'Unnamed' implicit. Deci, ținând cont de cele menționate mai sus, acum codul nostru pentru funcția Root va fi astfel:

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

Dacă acum repornim aplicația și intrăm pe pagina principală, vom vedea doar 'no products here ...', deoarece nu am adăugat încă nicio produse în depozit.

Luați aplicația creată de dvs. în sarcinile din lecțiile anterioare. Folosind materialele lecției, adăugați afișarea datelor obținute de la încărcător cu studenți, așa cum este descris în lecție.