Wykorzystanie danych uzyskanych przez loader w React Router

W poprzedniej lekcji uzyskaliśmy dane z magazynu za pomocą loader. Aby skorzystać z tych danych, użyjemy hooka useLoaderData. Otwórzmy plik root.jsx i dodajmy hook do importu:

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

W funkcji Root będziemy teraz otrzymywać dane do stałej products i pracować już z nią. Jeśli mamy jakieś produkty, to lista się wyświetli, jeśli nie, to wypiszemy w akapicie 'no products here ...'. W tagu nav używamy teraz standardowej pętli do wypisania uzyskanych produktów. Każdy element będzie owinięty w komponent Link i adres będzie każdy swój (o tym porozmawiamy później). Odpowiednio, jeśli produkt nie ma nazwy, to wypisze się 'Unnamed' domyślnie. A zatem, biorąc pod uwagę powyższe, teraz nasz kod dla funkcji Root będzie taki:

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

Jeśli teraz uruchomimy ponownie aplikację i wejdziemy na stronę główną, to zobaczymy tylko 'no products here ...', ponieważ żadnych produktów w magazynie jeszcze nie umieściliśmy.

Weź aplikację stworzoną przez Ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, dodaj wyświetlanie uzyskanych z loadera danych ze studentami, jak opisano w lekcji.