მარშრუტის მონაცემების დამტვირთველი 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-ში.