Maršruta datu ielādētājs React Router

Pēdējā nodarbībā mēs izvilkām produktu datus no krātuves. Tagad šie dati ir jāielādē maršruta elementā. Šim nolūkam tiek izmantota ielādētāja funkcija (loader). Tagad mēs to izveidosim.

Atvērsim root.jsx, pievienosim šeit importa rindiņu getProducts no forStorage.js:

import { getProducts } from '../forStorage'

Nekavējoties pēc importa rindiņām un pirms funkcijas Root uzrakstīsim kodu funkcijai loader, kas caur getProducts būs atgriezīs mums produktu datus no krātuves. Parasti šādas funkcijas jāraksta atsevišķā failā, bet mēs nedaudz paguravim, tāpēc nepievērsiet uzmanību brīdinājumam:

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

Tagad pievienosim mūsu ielādētāja importu main.jsx. Šis ielādētājs būs saknes maršrutam, tāpēc nosauksim to rootLoader:

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

Un pievienosim to mūsu maršruta objektam īpašībā loader:

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

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, uzrakstiet failā root.jsx funkciju loader studentu datu ielādei un pievienojiet to maršruta objektam main.jsx.