React Router-da yuklayici terefinden alinmis melumatlardan istifade

Kecen dersde biz anbardan loader vasitesile melumat almisdig. Bu melumatlardan istifade etmek ucun biz useLoaderData cenginden istifade edeceyik. Gelin root.jsx faylini aciq ve cengi importa elave edek:

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

Root funksiyasinda indi biz melumati products sabitine alaciq ve artiq onunla isleyeceyik. Əgər bizim her hansı mehsulumuz varsa, siyahi gosterilecek, yoxdursa, abzasda 'no products here ...' yazdiracagiq. nav teqinde biz indi standart sikl ile alinmis mehsullarin cedvelini yaradiriq. Her element Link komponentine qoyulacaq ve her birinin oz unvani olacaq (bu barəde sonra danışacagiq). Uygun olaraq, əgər mehsulun adi yoxdursa, standart olaraq 'Unnamed' gosterilecek. Beləliklə, yuxarida deyilenleri nezere alaraq, indi bizim Root funksiyasi ucun kod bele olacaq:

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

Əgər biz indi proqrami yenidən işe salib esas sehifeye baxsaq, goreceyik ki, yalniz 'no products here ...' yazılıb, çünki heç bir mehsul anbara helelik qoyulmayib.

Əvvəlki derslerin tapşırıqlarında yaratdığınız proqrami goturun. Dersin materiallarından istifadə edərək, yuklayicidan alinan telebelerle bagli melumatlarin gosterilmesini elave edin, dersde izah edildiyi kimi.