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 ...', რადგან არანაირი პროდუქტი საცავში ჩვენ ჯერ არ დავამატეთ.

აიღეთ აპლიკაცია, რომელიც თქვენ შექმენით წინა გაკვეთილების დავალებებში. გაკვეთილის მასალების გამოყენებით, დაამატეთ სტუდენტების შესახებ ლოადერიდან მიღებული მონაცემების ჩვენება, როგორც აღწერილია გაკვეთილში.