React Router-da yuklovchi tomonidan olingan ma'lumotlardan foydalanish

O'tgan darsda biz loader yordamida ma'lumotni ombordan oldik. Ushbu ma'lumotlardan foydalanish uchun biz useLoaderData hookidan foydalanamiz. Keling root.jsx faylini ochamiz va hookni import qilamiz:

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

Endi Root funksiyasida biz ma'lumotni products konstantasiga olamiz va shu bilan ishlaymiz. Agar bizda mahsulotlar bo'lsa, ro'yxat ko'rsatiladi, aks holda, 'no products here ...' satrini chiqaramiz. nav tegi ichida biz endi olinayotgan mahsulotlarni chiqarish uchun standart tsikldan foydalanamiz. Har bir element Link komponenti ichiga o'raladi va har birining manzili alohida bo'ladi (bu haqida keyinroq gapiramiz). Shunga ko'ra, agar mahsulotning nomi bo'lmasa, 'Unnamed' chiqadi. Yuqoridagilarni inobatga olgan holda, endi bizning Root funksiyasi uchun kod quyidagicha bo'ladi:

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

Agar biz hozir ilovani qayta ishga tushirsak va bosh sahifaga kirsak, faqat 'no products here ...' ni ko'ramiz, chunki biz hali omborga hech qanday mahsulot qo'ymaganmiz.

Oldingi darslar uchun topshiriqlarda yaratilgan ilovangizni oling. Dars materiallaridan foydalanib, yuklovchidan olingan studentlar ma'lumotlarini ko'rsatishni qo'shing, darsta tavsiflanganidek.