Използване на данни, получени от зареждащия в 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 ...', тъй като все още не сме добавили никакви продукти в хранилището.

Вземете приложението, създадено от вас в задачите към предишните уроци. Използвайки материалите от урока, добавете показване на получените от зареждащия данни със студенти, както е описано в урока.