Երթուղու տվյալների բեռնիչ 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 ֆայլում: