Loader i të dhënave për rrugën në React Router

Në mësimin e kaluar ne nxorrëm të dhënat e produkteve nga depoja. Tani këto të dhëna duhet të ngarkohen në elementin e rrugës. Për këtë përdoret funksioni i loader-it (loader). Tani do ta krijojmë atë.

Le të hapim root.jsx, të shtojmë këtu rreshtin e importit getProducts nga forStorage.js:

import { getProducts } from '../forStorage'

Menjëherë pas rreshtave të importit dhe përpara funksionit Root le të shkruajmë kodin e funksionit loader, i cili përmes getProducts do na kthejë të dhënat e produkteve nga depoja. Në përgjithësi funksione të tilla duhet shkruar në një skedar të veçantë, por ne do të jemi pak dembel, kështu që mos i kushtoni vëmendje paralajmërimit:

export async function loader() {
	const products = await getProducts();
	return { products };
}

Tani le të shtojmë importin e loader-it tonë në main.jsx. Ky loader do të jetë për rrenjin, prandaj le ta quajmë atë rootLoader:

import Root, { loader as rootLoader } from './routes/root';

Dhe le ta shtojmë atë në objektin tonë të rrugës në vetinë loader:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},
]);

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të kaluara. Duke përdorur materialet e mësimit, shkruani në skedarin root.jsx funksionin loader për ngarkimin e të dhënave të studentëve dhe shtoni atë në objektin e rrugës në main.jsx.