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 ...' гана көрөбүз, анткени сактагычка биз эч кандай продукт дагы салган жокпуз.

Өзүңүз мурунку сабактардын тапшырмаларында түзгөн колдонмонузду алыңыз. Сабактын материалын пайдаланып, сүйлөмдөгүдөй, студенттерден алынган жүктөөчү маалыматтарын көрсөтүүнү кошуңуз.