Marşrut üçün Verilənlər Yükləyicisi React Router-də

Keçən dərsdə biz məhsulların verilənlərini depodan çıxartdıq. İndi bu verilənlər marşrut elementinə yüklənməlidir. Bunun üçün yükləyici funksiyası (loader) istifadə olunur. İndi biz onu yaradacağıq.

root.jsx faylını açaq, buraya forStorage.js faylından getProducts import sətrini əlavə edək:

import { getProducts } from '../forStorage'

Import sətirlərindən dərhal sonra və funksiyadan əvvəl Root, loader funksiyasının kodunu yazaq, hansı ki, getProducts vasitəsilə bizə depodan məhsul verilənlərini qaytaracaq. Ümumiyyətlə, belə funksiyalar ayrıca faylda yazılmalıdır, amma biz bir az tənbəl olacıq, buna görə də xəbərdarlığa məhəl qoymayın:

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

İndi gəlin yükləyicimizin importunu əlavə edək main.jsx faylına. Bu yükləyici bizim üçün kök qovluğunda olacaq, ona görə də onu rootLoader adlandıraq:

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

Və onu marşrut obyektimizə əlavə edək loader xüsusiyyətinə:

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

Əvvəlki dərslərin tapşırıqlarında yaratdığınız tətbiqi götürün. Dərs materiallarından istifadə edərək, root.jsx faylında tələbə məlumatlarını yükləmək üçün loader funksiyasını yazın və onu main.jsx faylındakı marşrut obyektinə əlavə edin.