Вчитувач на податоци за рута во React Router

На претходната лекција ги извлековме податоците за продуктите од складиштето. Сега овие податоци треба да се вчитаат во елементот на рутата. За ова се користи функцијата вчитувач (loader). Сега ќе ја создадеме.

Да ја отвориме root.jsx, да додадеме овде линија за импорт на getProducts од forStorage.js:

import { getProducts } from '../forStorage'

Веднаш по линиите за импорт и пред функцијата Root да ја напишеме функцијата loader, која преку getProducts ќе ни ги враќа податоците за продуктите од складиштето. Во принцип ваквите функции треба да се пишуваат во посебен фајл, но ние малку ќе се потклетиме, па не обрнувајте внимание на предупредувањето:

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

Ајде сега да го додадеме импортот на нашиот вчитувач во main.jsx. Овој вчитувач ќе ни биде за коренот, па ќе го именуваме rootLoader:

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

И да го додадеме во нашиот објект на рутата во својството loader:

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

Земете ја апликацијата што ја создадовте во задачите од претходните лекции. Користејќи ги материјалите од лекцијата, напишете во фајлот root.jsx функција loader за вчитување на податоците за студенти и додадете ја во објектот на рутата во main.jsx.