Použití dat získaných loaderem v React Router

V minulé lekci jsme získali data z úložiště pomocí loader. Abychom těchto dat mohli využít, použijeme hook useLoaderData. Otevřeme soubor root.jsx a přidáme hook do importu:

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

Ve funkci Root nyní budeme získávat data do konstanty products a pracovat již s ní. Pokud máme nějaké produkty, zobrazí se seznam, pokud ne, vypíšeme v odstavci 'no products here ...'. V tagu nav nyní používáme standardní cyklus pro výpis získaných produktů. Každý prvek bude obalen v komponentu Link a adresa bude každý svůj (o tom si povíme později). Pokud tedy produkt nemá název, vypíše se 'Unnamed' ve výchozím nastavení. Vzhledem k výše uvedenému, nyní bude náš kód pro funkci Root takovýto:

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

Pokud nyní restartujeme aplikaci a přejdeme na hlavní stránku, uvidíme pouze 'no products here ...', protože žádné produkty do úložiště jsme zatím nevložili.

Vezměte aplikaci, kterou jste vytvořili v úkolech k minulým lekcím. S využitím materiálů lekce přidejte zobrazení získaných dat ze loaderu se studenty, jak je popsáno v lekci.