Utilisation des données obtenues par le chargeur dans React Router

Dans la leçon précédente, nous avons obtenu des données du stockage en utilisant loader. Pour utiliser ces données, nous utiliserons le hook useLoaderData. Ouvrons le fichier root.jsx et ajoutons le hook dans l'import :

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

Dans la fonction Root, nous obtiendrons maintenant les données dans la constante products et nous travaillerons avec elle. Si nous avons des produits, la liste s'affichera, sinon, nous afficherons dans un paragraphe 'no products here ...'. Dans la balise nav nous utilisons maintenant une boucle standard pour afficher les produits obtenus. Chaque élément sera enveloppé dans un composant Link et l'adresse sera spécifique à chacun (nous en parlerons plus tard). En conséquence, si un produit n'a pas de nom, 'Unnamed' sera affiché par défaut. Ainsi, compte tenu de ce qui précède, notre code pour la fonction Root sera maintenant :

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

Si nous redémarrons l'application maintenant et allons sur la page d'accueil, nous verrons seulement 'no products here ...', puisque nous n'avons encore mis aucun produit dans le stockage.

Prenez l'application que vous avez créée dans les travaux pratiques des leçons précédentes. En utilisant le matériel de la leçon, ajoutez l'affichage des données obtenues à partir du chargeur concernant les étudiants, comme décrit dans la leçon.