Chargeur de données pour la route dans React Router

Dans la leçon précédente, nous avons extrait les données des produits du stockage. Maintenant, ces données doivent être chargées dans l'élément de route. Pour cela, on utilise une fonction chargeur (loader). Maintenant, nous allons la créer.

Ouvrons root.jsx, ajoutons ici une ligne d'importation pour getProducts depuis forStorage.js :

import { getProducts } from '../forStorage'

Immédiatement après les lignes d'importation et avant la fonction Root, écrivons le code de la fonction loader, qui via getProducts va nous retourner les données des produits depuis le stockage. En général, de telles fonctions doivent être écrites dans un fichier séparé, mais nous allons être un peu paresseux, donc ne faites pas attention à l'avertissement :

export async function loader() {
	const products = await getProducts();
	return { products };
}

Maintenant, ajoutons l'importation de notre chargeur dans main.jsx. Ce chargeur sera pour notre racine, donc nous l'appellerons rootLoader :

import Root, { loader as rootLoader } from './routes/root';

Et ajoutons-le à notre objet de route dans la propriété loader :

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},
]);

Prenez l'application que vous avez créée dans les travaux dirigés des leçons précédentes. En utilisant le contenu de la leçon, écrivez dans le fichier root.jsx la fonction loader pour charger les données des étudiants et ajoutez-la dans l'objet de route dans main.jsx.