Utilizzo dei dati ottenuti dal loader in React Router

Nella lezione precedente abbiamo ottenuto i dati dal magazzino utilizzando loader. Per utilizzare questi dati, useremo l'hook useLoaderData. Apriamo il file root.jsx e aggiungiamo l'hook nell'import:

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

Nella funzione Root ora otterremo i dati nella costante products e lavoreremo con essa. Se abbiamo dei prodotti, la lista verrà visualizzata, altrimenti visualizzeremo nel paragrafo 'no products here ...'. Nel tag nav ora utilizziamo un ciclo standard per visualizzare i prodotti ottenuti. Ogni elemento sarà avvolto nel componente Link e l'indirizzo sarà unico per ciascuno (ne parleremo più tardi). Di conseguenza, se un prodotto non ha un nome, verrà visualizzato 'Unnamed' per impostazione predefinita. Quindi, tenendo conto di quanto sopra, ora il nostro codice per la funzione Root sarà così:

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

Se ora riavviamo l'applicazione e andiamo sulla pagina principale, vedremo solo 'no products here ...', poiché non abbiamo ancora inserito nessun prodotto nel magazzino.

Prendi l'applicazione creata da te nei compiti delle lezioni precedenti. Usando i materiali della lezione, aggiungi la visualizzazione dei dati ottenuti dal loader con gli studenti, come descritto nella lezione.