Načítavač dát pre trasu v React Router

Na minulej lekcii sme extrahovali dáta produktov z úložiska. Teraz tieto dáta treba načítať do elementu trasy. Na to sa používa funkcia načítavača (loader). Teraz ju vytvoríme.

Otvorme root.jsx, pridáme sem riadok importu getProducts z forStorage.js:

import { getProducts } from '../forStorage'

Hneď po riadkoch importu a pred funkciou Root napíšeme kód funkcie loader, ktorá cez getProducts bude vracať nám dáta s produktmi z úložiska. Všeobecne takéto funkcie treba písať v samostatnom súbore, ale my trochu zlenivieme, takže nevenujte pozornosť varovaniu:

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

Pridajme teraz import nášho načítavača do main.jsx. Tento načítavač bude u nás pre koreň, preto ho nazveme rootLoader:

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

A pridajme ho do nášho objektu trasy do vlastnosti loader:

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

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k minulým lekciám. Používajúc materiály lekcie, napíšte v súbore root.jsx funkciu loader pre načítanie dát študentov a pridajte ju do objektu trasy v main.jsx.