Loader podataka za rutu u React Router

U prethodnoj lekciji smo izvukli podatke proizvoda iz skladišta. Sada ove podatke treba da učitamo u element rute. Za ovo se koristi funkcija loader-a (loader). Sada ćemo je kreirati.

Otvorimo root.jsx, dodajmo ovde liniju import-a getProducts iz forStorage.js:

import { getProducts } from '../forStorage'

Odmah posle linija import-a i pre funkcije Root napišimo kod funkcije loader, koja preko getProducts će vraćati nam podatke sa proizvodima iz skladišta. Uopšte takve funkcije treba pisati u posebnom fajlu, ali mi ćemo malo biti lenji, tako da ne obraćajte pažnju na upozorenje:

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

Hajde sada da dodamo import našeg loader-a u main.jsx. Ovaj loader će kod nas biti za koren, stoga ćemo ga nazvati rootLoader:

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

I dodajmo ga u naš objekat rute u svojstvo loader:

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

Uzmite aplikaciju, koju ste kreirali u zadacima za prethodne lekcije. Koristeći se materijalima lekcije, napišite u fajlu root.jsx funkciju loader za učitavanje podataka studenata i dodajte je u objekat rute u main.jsx.