React Router'da marshrut uchun ma'lumotlar yuklovchisi

O'tgan darsda biz mahsulotlar ma'lumotlarini omborxonadan olib chiqdik. Endi bu ma'lumotlarni marshrut elementiga yuklash kerak. Buning uchun yuklovchi funktsiyasi (loader) ishlatiladi. Hozir biz uni yaratamiz.

root.jsx faylini ochamiz, bu yerga getProducts ning import qatorini qo'shamiz forStorage.js dan:

import { getProducts } from '../forStorage'

Import qatorlaridan darhol keyin va Root funktsiyasidan oldin loader funktsiyasining kodini yozamiz, u getProducts orqali bizga omborxonadagi mahsulotlar haqidagi ma'lumotlarni qaytaradi. Umuman bunday funktsiyalarni alohida faylda yozish kerak, lekin biz biroz dam olamiz, shuning uchun ogohlantirishga e'tibor bermang:

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

Keling, endi main.jsx fayliga yuklovchimizni import qilaylik. Bu yuklovchi biz uchun ildiz (root) uchun bo'ladi, shuning uchun uni rootLoader deb nomlaymiz:

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

Va uni marshrut obyektimizga loader xususiyatiga qo'shamiz:

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

Oldingi darslar uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, root.jsx faylida talabalar ma'lumotlarini yuklash uchun loader funktsiyasini yozing va uni main.jsx faylidagi marshrut obyektiga qo'shing.