Andmete kasutamine laadijast React Routeris

Eelmises õppetükis saime andmed poest kasutades loader. Selleks, et neid andmeid kasutada, kasutame hooki useLoaderData. Avame faili root.jsx ja lisame hooki importi:

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

Funktsioonis Root saame nüüd andmed konstandi products sisse ja töötame sellega. Kui meil on mõned tooted, siis nimekiri kuvatakse, kui mitte, siis kuvame lõigus 'no products here ...'. Teemis nav kasutame nüüd tavapärast tsüklit saadud toodete kuvamiseks. Iga element mähitakse komponendisse Link ja aadress on igal oma (sellest räägime hiljem). Seega, kui tootel pole nime, siis kuvatakse 'Unnamed' vaikimisi. Niisiis, arvestades eelnevat, meie kood funktsioonile Root on nüüd järgmine:

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

Kui me nüüd rakendust uuesti käivitame ja pealehele läheme, siis näeme ainult 'no products here ...', kuna ühtegi toodet poodi me veel ei pannud.

Võtke rakendus, mille lõite ülesannetes eelmiste õppetundide jaoks. Kasutades õppetunni materjale, lisage laadijast saadud andmete kuvamine õpilastega, nagu õppetükis kirjeldatud.