React Routerда ёкилгич орқали олинган маълумотлардан фойдаланиш

Ўтган дарсда биз сақловчидан loader ёрдамида маълумот олдик. Ушбу маълумотлардан фойдаланиш учун биз useLoaderData хукдан фойдаланамиз. Файл root.jsx ни очиб, хуқни импорт қиламиз:

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

Энди Root функциясида биз маълумотларни products константига оламиз ва ундан фойдаланамиз. Агар бизнинг маҳсулотлар бўлса, рўйхат кўрсатилади, акс ҳолда, биз абзацда 'no products here ...' ни кўрсатамиз. nav тегида биз энди олинган маҳсулотларни кўрсатиш учун стандарт циклдан фойдаланамиз. Ҳар бир элемент Link компонентига ўралади ва ҳар бирининг манзили бўлади (бу ҳақида кейинроқ гапирамиз). Мос равишда, агар маҳсулотнинг номи бўлмаса, 'Unnamed' номи стандарт бўларак кўрсатилади. Демак, юқорида айтилганларни ҳисобга олган ҳолда, бизнинг Root функцияси учун код энди шундай бўлади:

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

Агар биз ҳозир иловани қайта ишга туширсак ва бош саҳифага кирсак, фақат 'no products here ...' ни кўрамиз, чунки биз ҳали сақловчига ҳеч қандай маҳсулот қўймадик.

Ўтган дарслардаги вазифаларда яратган иловангизни олинг. Дарс материалларидан фойдаланиб, дарсда тавсифланганидек, ёкилгичдан олинган ўқувчилар ҳақидаги маълумотларни кўрсатишни қўшинг.