React Router-daky marshrut üçin maglumat ýükleyji

Öňki sapakda biz önümler baradaky maglumatlary amhardan aldyk. Indi bu maglumatlar marshrut elementine ýüklenmeli. Munuň üçin ýükleyji funksiýasy (loader) ulanylýar. Häzir biz ony dözeris.

root.jsx faýlyny açalyň, şu ýere getProducts import setirini forStorage.js faýlyndan goşalyň:

import { getProducts } from '../forStorage'

Derrew import setirlerinden soň we Root funkiýasyndan öň loader funksiýasynyň kodyny ýazalyň, ýagny getProducts arkaly bize amhardaky önümler baradaky maglumatlary yzygiderlýär. Umuman, beýle funksiýalar aýratyn faýlda ýazylmaly, ýöne biz birneme erjeňlik ederis, şonuň üçin duýduryşy üns bermäň:

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

Indi geliň, bizim ýükleyjimizi main.jsx faýlyna import edeliň. Bu ýükleyji biziň üçin kök bolup biler, şonuň üçin ony rootLoader diýip atlandyralyň:

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

We ony biziň marshrut objektiňize loader aýratynlygyna goşalyň:

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

Öňki sapaklaryň tabşyryklarynda döreden programmanyňyzy alyň. Sapak materiallaryndan peýdalanyp, root.jsx faýlynda okuwçylaryň maglumatlaryny ýüklemek üçin loader funksiýasyny ýazyň we ony main.jsx faýlyndaky marshrut objektiňize goşuň.