Загрузчик на данни за маршрут в 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.