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 ...' көреміз, себебі біз әлі ешбір өнімді қоймаға салған жоқпыз.

Алдыңғы сабақтардың тапсырмаларында жасаған қолданбаңызды алыңыз. Сабақ материалын пайдаланып, жүктеуіштен алынған студенттер туралы деректерді көрсетуді сабақта сипатталғандай қосыңыз.