Adatbetöltő az útvonalhoz a React Routerben

Az előző leckében kinyertük a termékek adatait a tárolóból. Most ezeket az adatokat be kell tölteni az útvonal elemébe. Ehhez egy betöltő függvényt (loader) használunk. Most meg fogjuk alkotni.

Nyissuk meg a root.jsx fájlt, adjuk hozzá a getProducts import sort a forStorage.js fájlból:

import { getProducts } from '../forStorage'

Közvetlenül az import sorok után és a Root függvény előtt írjuk meg a loader függvény kódját, amely a getProducts segítségével visszaadja nekünk a tárolóból származó termékadatok adatokat. Általában az ilyen függvényeket külön fájlba kell írni, de mi most kicsit lusták leszünk, ezért ne figyeljetek a figyelmeztetésre:

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

Most adjuk hozzá a betöltőnk importját a main.jsx fájlhoz. Ez a betöltő nálunk a gyökérhez lesz, ezért nevezzük el rootLoader-nek:

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

És adjuk hozzá az útvonalunk objektumához a loader tulajdonsághoz:

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

Vegyétek elő az alkalmazást, amit az előző leckék feladataihoz készítettetek. A lecke anyagait felhasználva írjátok meg a root.jsx fájlban a loader függvényt a diákok adatainak betöltéséhez és adjátok hozzá az útvonal objektumhoz a main.jsx fájlban.