Gebruik van gegevens verkregen door de loader in React Router

In de vorige les hebben we gegevens uit de opslag verkregen met behulp van loader. Om deze gegevens te kunnen gebruiken, gebruiken we de hook useLoaderData. Laten we het bestand root.jsx openen en de hook toevoegen aan de import:

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

In de functie Root zullen we nu de gegevens in de constante products ontvangen en ermee werken. Als we producten hebben, wordt de lijst weergegeven, zo niet, dan geven we in de paragraaf 'no products here ...' weer. In de tag nav gebruiken we nu een standaard lus om de verkregen producten weer te geven. Elk element wordt verpakt in de component Link en elk adres zal een eigen adres hebben (hierover zullen we later praten). Dienovereenkomstig, als een product geen naam heeft, wordt 'Unnamed' weergegeven standaard. Dus, rekening houdend met het bovenstaande, zal onze code voor de functie Root nu als volgt zijn:

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

Als we de applicatie nu herstarten en naar de startpagina gaan, zullen we alleen 'no products here ...' zien, omdat er nog geen producten in de opslag zijn geplaatst.

Neem de applicatie die je hebt gemaakt in de opdrachten bij eerdere lessen. Gebruikmakend van de lesmaterialen, voeg de weergave toe van de van de loader verkregen gegevens met studenten, zoals beschreven in de les.