Bruke data hentet av en loader i React Router

I forrige leksjon hentet vi data fra lagringsstedet ved hjelp av loader. For å bruke disse dataene, bruker vi hooken useLoaderData. La oss åpne filen root.jsx og legge til hooken i importen:

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

I funksjonen Root vil vi nå motta dataene i konstanten products og jobbe med den. Hvis vi har noen produkter, vil listen vises, hvis ikke, vil vi vise paragrafen 'no products here ...'. I taggen nav bruker vi nå en standard løkke for å vise de mottatte produktene. Hvert element vil være pakket inn i en Link-komponent og adressen vil være sin for hver (dette skal vi snakke om senere). Følgelig, hvis produktet ikke har noe navn, vil 'Unnamed' vises som standard. Så, med tanke på ovenstående, vil koden vår for funksjonen Root nå se slik ut:

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

Hvis vi starter applikasjonen på nytt nå og går til hovedsiden, vil vi kun se 'no products here ...', siden vi ennå ikke har lagt noen produkter i lagringsstedet.

Ta applikasjonen du opprettet i oppgavene til de foregående leksjonene. Bruk materialet fra leksjonen, og legg til visning av data hentet fra loaderen med studenter, som beskrevet i leksjonen.