Récupération des données du loader via les paramètres d'URL dans React Router

Dans la leçon précédente, nous avons écrit une fonction pour récupérer les données de la page produit, importons getProduct dans le fichier product.jsx :

import { getProduct } from '../forStorage';

Écrivons la fonction loader loader immédiatement après l'importation et avant la fonction Product. Passons-lui les paramètres d'URL :

export async function loader({ params }) {
	const product = await getProduct(params.productId);
	return { product };
}

Importons également le hook useLoaderData pour utiliser les données récupérées par le loader :

import { useLoaderData } from 'react-router-dom';

Appliquons useLoaderData, en remplaçant en conséquence la ligne de création de l'objet product au début de la fonction Product par la suivante :

const { product } = useLoaderData();

Et, bien sûr, modifions légèrement notre balisage, puisque nous avons supprimé l'ancien objet product. Remplaçons le contenu des paragraphes :

<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

Par ceci :

<p>Nom: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Prix: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Quantité: {product.amount ? product.amount : <i>unknown</i>}</p>

Il nous reste à ouvrir main.jsx et y ajouter l'import de loader, appelons-le productLoader :

import Product, {
	loader as productLoader,
} from './routes/product';

Et à le spécifier comme loader pour l'objet de route de la page produit, en l'ajoutant dans children après la propriété element :

children: [
	{
		path: 'products/:productId',
		element: <Product />,
		loader: productLoader,
	},
],

Voilà, nous avons réglé le chargement des données pour la page produit ! Cependant, nous n'avons rien à charger pour le moment. Lancez l'application, ajoutez des produits et cliquez sur eux dans la liste pour vous assurer que tout fonctionne.

Prenez l'application que vous avez créée dans les travaux pratiques des leçons précédentes. En utilisant le contenu de cette leçon, implémentez un loader, connectez-le, et utilisez les données qu'il fournit pour la page de l'étudiant.