Data loader voor route in React Router

In de vorige les hebben we de productgegevens uit de opslag gehaald. Nu moeten deze gegevens in het route-element worden geladen. Hiervoor wordt de loader functie (loader) gebruikt. Laten we deze nu creëren.

Open root.jsx, voeg hier de importregel getProducts van forStorage.js toe:

import { getProducts } from '../forStorage'

Direct na de importregels en vóór de functie Root schrijven we de code voor de functie loader, die via getProducts de productgegevens uit de opslag zal teruggeven. Eigenlijk moeten dergelijke functies in een apart bestand worden geschreven, maar we zijn een beetje lui, dus let niet op de waarschuwing:

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

Laten we nu de import van onze loader toevoegen aan main.jsx. Deze loader is voor de wortel, dus we noemen het rootLoader:

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

En voeg het toe aan ons route-object in de eigenschap loader:

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

Neem de applicatie die je in de opdrachten bij eerdere lessen hebt gemaakt. Gebruikmakend van de lesmaterialen, schrijf in het bestand root.jsx de functie loader voor het laden van studentgegevens en voeg deze toe aan het route-object in main.jsx.