Dataladdare för rutt i React Router

I förra lektionen extraherade vi data för produkter från lagringen. Nu behöver denna data laddas in i rutelementet. För detta används en laddarfunktion (loader). Nu ska vi skapa den.

Låt oss öppna root.jsx, lägg till en importrad för getProducts från forStorage.js:

import { getProducts } from '../forStorage'

Omedelbart efter importraderna och före funktionen Root skriver vi koden för funktionen loader, som via getProducts kommer att returnera produktdata från lagringen. Egentligen borde sådana funktioner skrivas i en separat fil, men vi kommer att vara lite lata, så bry er inte om varningen:

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

Låt oss nu lägga till import av vår laddare i main.jsx. Denna laddare kommer att vara för roten, så vi kallar den rootLoader:

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

Och lägg till den i vårt rutobjekt i egenskapen loader:

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

Ta applikationen du skapade i uppgifterna till tidigare lektioner. Använd lektionens material, skriv i filen root.jsx funktionen loader för att ladda studentdata och lägg till den i rutobjektet i main.jsx.