Nalagalnik podatkov za pot v React Router

V prejšnji lekciji smo pridobili podatke izdelkov iz shrambe. Zdaj je treba te podatke naložiti v element poti. Za to se uporablja funkcija nalagalnika (loader). Zdaj jo bomo ustvarili.

Odprimo root.jsx, dodajmo tukaj vrstico za uvoz getProducts iz forStorage.js:

import { getProducts } from '../forStorage'

Takoj za vrsticami za uvoz in pred funkcijo Root napišimo kodo funkcije loader, ki bo prek getProducts vračala podatke z izdelki iz shrambe. Načeloma je treba takšne funkcije pisati v ločeni datoteki, vendar bomo malo lenarili, zato ne bodite pozorni na opozorilo:

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

Zdaj dodajmo uvoz našega nalagalnika v main.jsx. Ta nalagalnik bo za koren, zato ga poimenujmo rootLoader:

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

In dodajmo ga v naš objekt poti v lastnost loader:

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

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva iz lekcije napišite v datoteki root.jsx funkcijo loader za nalaganje podatkov študentov in jo dodajte v objekt poti v main.jsx.