Data Laaier vir Roete in React Router

In die vorige les het ons die data van produkte uit die stoor gehaal. Nou hierdie data moet in die roeteelement gelaai word. Vir dit word die laaierfunksie (loader) gebruik. Tans skep ons dit.

Maak root.jsx oop, voeg hierdie invoer reël getProducts by vanuit forStorage.js:

import { getProducts } from '../forStorage'

Dadelik na die invoer reëls en voor die funksie Root skryf ons die kode van die funksie loader, wat deur getProducts vir ons die data met produkte uit die stoor sal terugstuur. In elk geval moet sulke funksies geskryf word in 'n aparte lêer, maar ons sal 'n bietjie lui wees, so moenie aandag gee aan die waarskuwing nie:

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

Laat ons nou die invoer van ons laaier byvoeg in main.jsx. Hierdie laaier sal vir die wortel wees, daarom noem ons dit rootLoader:

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

En voeg dit by ons roetvoorwerp in die eienskap loader:

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

Neem die toepassing wat deur u geskep is in opdragte vir vorige lesse. Gebruik die materiaal van die les, skryf in die lêer root.jsx die funksie loader vir die laai van studentedata en voeg dit in die roetvoorwerp in main.jsx by.