Încărcătorul de date pentru rută în React Router

În lecția precedentă, am extras datele produselor din depozit. Acum aceste date trebuie încărcate în elementul rutei. Pentru aceasta, se utilizează funcția încărcător (loader). Acum o vom crea.

Deschidem root.jsx, adăugăm aici linia de import getProducts din forStorage.js:

import { getProducts } from '../forStorage'

Imediat după liniile de import și înainte de funcția Root, vom scrie codul funcției loader, care prin getProducts va returna datele cu produsele din depozit. În general, astfel de funcții trebuie scrise într-un fișier separat, dar noi vom fi puțin leneși, așa că nu acordați atenție avertismentului:

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

Să adăugăm acum importul încărcătorului nostru în main.jsx. Acest încărcător va fi pentru rădăcină, așa că îl vom numi rootLoader:

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

Și îl vom adăuga în obiectul nostru de rută în proprietatea loader:

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

Luați aplicația creată de dvs. în sarcinile din lecțiile anterioare. Folosind materialele lecției, scrieți în fișierul root.jsx funcția loader pentru încărcarea datelor studenților și adăugați-o în obiectul de rută din main.jsx.