Mpakuzi wa Data kwa Njia katika React Router

Katika somo lililopita tulitoa data za bidhaa kutoka kwa ghala. Sasa hizi data zinahitaji kupakuliwa kwenye kipengele cha njia. Kwa hili inatumika kitendo cha mpakuzi (loader). Sasa tutaitengeneza.

Wazi root.jsx, tuongeze hapa mstari wa kuagiza getProducts kutoka forStorage.js:

import { getProducts } from '../forStorage'

Mara baada ya mistari ya kuagiza na kabla ya kitendo Root tuandike msimbo wa kitendo loader, ambayo kupitia getProducts itaturudishia data za bidhaa kutoka ghala. Kwa ujumla vitendo kama hivi vinapaswa kuandikwa katika faili tofauti, lakini sisi tutakuwa wavivu kidogo, kwa hivyo usizingatie onyo:

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

Sasa tuongeze kuagiza kwa mpakuzi wetu kwenye main.jsx. Huyu mpakuzi wetu utakuwa kwa mzizi, kwa hivyo tutamuita rootLoader:

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

Na tuongeze kwenye kitu chetu cha njia katika sifa loader:

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

Chukua programu iliyotengenezwa na wewe katika kazi za kufanyia masomo yaliyopita. Kwa kutumia nyenzo za somo, andika kwenye faili root.jsx kitendo loader kwa kupakua data za wanafunzi na uongeze kwenye kitu cha njia katika main.jsx.