Data Loader for Route in React Router

I den forrige lektion udtrak vi data for produkter fra lageret. Nu skal disse data indlæses i ruteelementet. Til dette bruges loader-funktionen (loader). Lige nu vil vi oprette den.

Lad os åbne root.jsx og tilføje en importlinje for getProducts fra forStorage.js:

import { getProducts } from '../forStorage'

Lige efter importlinjerne og før funktionen Root skriver vi koden for funktionen loader, som via getProducts vil returnere produktdataene fra lageret. Generelt skal sådanne funktioner skrives i en separat fil, men vi vil være lidt dovne, så ignorer advarslen:

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

Lad os nu tilføje importen af vores loader til main.jsx. Denne loader vil være for roden, så vi kalder den rootLoader:

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

Og vi tilføjer den til vores ruteobjekt i egenskaben loader:

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

Tag det program, du oprettede i opgaverne til de foregående lektioner. Brug materialet fra lektionen, og skriv i filen root.jsx funktionen loader for at indlæse studerendes data og tilføj den til ruteobjektet i main.jsx.