Gebruik van Data, Verkry deur die Laaier in React Router

In die vorige les het ons data van die stoor verkry met behulp van loader. Om hierdie data te gebruik, gebruik ons die hook useLoaderData. Kom ons maak die lêer root.jsx oop en voeg die hook by die invoer:

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

In die funksie Root sal ons nou die data in die konstante products kry en daarmee werk. As ons enige produkte het, sal die lys vertoon word; indien nie, sal ons in 'n paragraaf 'no products here ...' uitvoer. In die nav-tag gebruik ons nou die standaard lus om die verkrygde produkte uit te voer. Elke element sal toegedraai word in die komponent Link en die adres sal vir elkeen eie wees (hieroor sal ons later praat). Gevolglik, as 'n produk geen naam het nie, sal 'Unnamed' standaard vertoon word. Dus, met inagneming van bogenoemde, sal ons kode vir die funksie Root nou so lyk:

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

As ons nou die toepassing herlaai en na die tuisblad gaan, sal ons slegs 'no products here ...' sien, aangesien ons nog geen produkte in die stoor geplaas het nie.

Neem die toepassing wat jy in die opdragte vir vorige lesse geskep het. Gebruik die materiaal van die les, voeg die vertoning by van die data wat van die laaier verkry is met studente, soos in die les beskryf.