Përdorimi i të dhënave të marra nga loader në React Router

Në mësimin e kaluar ne kemi marrë të dhëna nga depozita duke përdorur loader. Në mënyrë që të përdorim këto të dhëna, ne do të përdorim hook useLoaderData. Le të hapim fajllin root.jsx dhe të shtojmë hook në import:

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

Në funksionin Root ne tani do të marrim të dhënat në konstanten products dhe do të punojmë me të. Nëse kemi ndonjë produkt, atëherë lista do të shfaqet, nëse jo, atëherë do të shkruajmë në paragraf 'no products here ...'. Në tagun nav ne tani përdorim ciklin standard për shfaqjen e produkteve të marra. Çdo element do të mbështjellët në komponentin Link dhe adresa do të jetë e veçantë për secilin (për këtë do të flasim më vonë). Prandaj, nëse produkti nuk ka emër, atëherë do të shfaqet 'Unnamed' sipas parazgjedhjes. Pra, duke marrë parasysh sa më sipër, tani kodi ynë për funksionin Root do të jetë i tillë:

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>
	);
}

Nëse tani e rinisim aplikacionin dhe shkojmë në faqen kryesore, do të shohim vetëm 'no products here ...', meqenëse asnjë produkt në depozitë ende nuk kemi vendosur.

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të kaluara. Duke përdorur materialet e mësimit, shtoni shfaqjen e të dhënave të marra nga loader me studentët, siç përshkruhet në mësim.