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-да қўшинг.