Marsruudi andmelaadur React Routeris

Eelmises õppetükis me eraldasime andmed toodetest hoidlast. Nüüd need andmed tuleb laadida marsruudi elemendi. Selleks kasutatakse laadurifunktsiooni (loader). Praegu loome selle.

Avame root.jsx, lisame siia impordirea getProducts failist forStorage.js:

import { getProducts } from '../forStorage'

Kohe pärast impordireasid ja enne funktsiooni Root kirjutame koodi funktsioonile loader, mis läbi getProducts tagastab meile tooteandmed hoidlast. Üldiselt tuleks selliseid funktsioone kirjutada eraldatud failis, kuid me oleme veidi laisad, nii et ärge pöörake tähelepanu hoiatusele:

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

Lisame nüüd oma laaduri impordi faili main.jsx. See laadur on meie jaoks juure jaoks, nii et nimetame selle rootLoader:

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

Ja lisame selle oma marsruudi objekti omadusse loader:

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

Võtke rakendus, mille lõite ülesannetes eelmistele õppetundidele. Kasutades õppetunni materjale, kirjutage failis root.jsx funktsioon loader õpilaste andmete laadimiseks ja lisage see marsruudi objekti faili main.jsx.