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.