Caricatore di dati per la rotta in React Router

Nella lezione precedente abbiamo estratto i dati dei prodotti dal deposito. Ora questi dati devono essere caricati nell'elemento della rotta. Per questo viene utilizzata la funzione del caricatore (loader). Adesso la creeremo.

Apriamo root.jsx, aggiungiamo qui la riga di importazione getProducts da forStorage.js:

import { getProducts } from '../forStorage'

Subito dopo le righe di importazione e prima della funzione Root scriviamo il codice della funzione loader, che tramite getProducts ci restituirà i dati dei prodotti dal deposito. In generale tali funzioni dovrebbero essere scritte in un file separato, ma noi siamo un po' pigri, quindi non fate caso all'avvertimento:

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

Ora aggiungiamo l'importazione del nostro caricatore in main.jsx. Questo caricatore sarà per la radice, quindi lo chiameremo rootLoader:

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

E aggiungiamolo al nostro oggetto di rotta nella proprietà loader:

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

Prendete l'applicazione creata da voi nei compiti delle lezioni precedenti. Utilizzando i materiali della lezione, scrivete nel file root.jsx la funzione loader per il caricamento dei dati degli studenti e aggiungetela all'oggetto di rotta in main.jsx.