Matumizi ya Data Zilizopatikana Kutoka kwa Kipakiaji katika React Router

Katika somo lililopita tulipata data kutoka kwenye kuhifadhi kwa kutumia loader. Ili tutumie data hizi, tunatumia ndoano useLoaderData. Wacha tufungue faili root.jsx na tuongeze ndoano kwenye usafirishaji:

import { Outlet, Link, useLoaderData } from 'react-router-dom';

Katika kitendakazi Root sasa tutapata data kwenye konstanti products na kufanya kazi nayo. Ikiwa tuna bidhaa zozote, basis orodha itaonyeshwa, ikiwa hakuna, basi tutaweka kwenye aya 'no products here ...'. Katika kitambulisho nav sasa tunatumia kitanzi cha kawaida kuonyesha bidhaa zilizopatikana. Kila kipengele kitafungwa ndani ya kijenzi Link na anwani itakuwa ya kila mmoja (kuhusu hili tutazungumza baadaye). Ipasavyo, ikiwa bidhaa haina jina, basi 'Unnamed' itaonyeshwa kwa chaguomsingi. Kwa hivyo, kwa kuzingatia yaliyosemwa hapo juu, sasa msimbo wetu wa kitendakazi Root utakuwa kama huu:

function Root() {

	const { products } = useLoaderData();
	return (
		<div id="main">
			{products.length ? (
				<nav>
					{products.map((product) => (
						<Link key={product.id} to={`products/${product.id}`}>
							{product.name ? product.name : <i>Unnamed</i>}
						</Link>
					))}
				</nav>
			) : (
				<p><i>no products here ...</i></p>
			)}
			<div id="product">
				<Outlet />
			</div>
		</div>
	);
}

Ikiwa sasa tukiwasha upya programu na tukingia kwenye ukurasa wa kwanza, tutaona tu 'no products here ...', kwa sababu hakuna bidhaa yoyote kwenye kuhifadhi bado hatujaweka.

Chukua programu uliyoiumba katika kazi za masomo yaliyopita. Kwa kutumia nyenzo za somo, ongeza kuonyeshwa kwa data zilizopatikana kutoka kwa kipakiaji zenye wanafunzi, kama ilivyoelezewa kwenye somo.