Datalaster for rute i React Router

I forrige leksjon hentet vi dataene fra produkter fra lagringsstedet. Nå må disse dataene lastes inn i ruteelementet. For dette brukes en lasterfunksjon (loader). Nå skal vi opprette den.

La oss åpne root.jsx, og legge til en importeringslinje for getProducts fra forStorage.js:

import { getProducts } from '../forStorage'

Rett etter importeringslinjene og før funksjonen Root skal vi skrive koden for funksjonen loader, som via getProducts vil returnere produktdataene fra lagringsstedet. Egentlig bør slike funksjoner skrives i en egen fil, men vi skal være litt late, så ikke ta hensyn til advarselen:

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

La oss nå legge til importen av vår laster i main.jsx. Denne lasteren vil være for roten, så vi kaller den rootLoader:

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

Og legg den til i vårt ruteobjekt i egenskapen loader:

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

Ta applikasjonen du opprettet i oppgavene til de foregående leksjonene. Bruk materialet fra leksjonen, skriv i filen root.jsx funksjonen loader for lasting av studentdata og legg den til i ruteobjektet i main.jsx.