Brug af data hentet af loader i React Router

I den forrige lektion hentede vi data fra lagret ved hjælp af loader. For at bruge disse data, bruger vi hook useLoaderData. Lad os åbne filen root.jsx og tilføje hook til importen:

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

I funktionen Root vil vi nu hente dataene i konstanten products og arbejde med dem. Hvis vi har nogle produkter, vil listen blive vist, hvis ikke, vil vi vise i et afsnit 'no products here ...'. I tagget nav bruger vi nu en standard loop til at vise de hentede produkter. Hvert element vil være pakket ind i komponenten Link og adressen vil være sin egen for hver (dette vil vi tale om senere). Derfor, hvis produktet ikke har noget navn, vil 'Unnamed' blive vist som standard. Så, i betragtning af ovenstående, vil vores kode for funktionen Root nu se sådan ud:

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 nu genstarter applikationen og går til forsiden, vil vi kun se 'no products here ...', da vi ikke har lagt nogen produkter i lagret endnu.

Tag den applikation, du oprettede i opgaverne til de foregående lektioner. Brug materialet fra lektionen, og tilføj visning af data hentet fra loader med studerende, som beskrevet i lektionen.