Маршрут үшін деректер жүктеушісі 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 файлындағы маршрут объектісіне қосыңыз.