Duomenų, gautų įkėlimo įrankio, naudojimas React Router

Ankstesnėje pamokoje mes gavome duomenis iš saugyklos naudodami loader. Norėdami panaudoti šiuos duomenis, mes naudosime hook'ą useLoaderData. Atidarykime failą root.jsx ir pridėkime hook'ą į importą:

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

Funkcijoje Root mes dabar gausime duomenis į konstantą products ir dirbsime su ja. Jei mes turime kokius nors produktus, sąrašas bus atvaizduotas, jei ne, tada išvesime į pastraipą 'no products here ...'. Žymėje nav mes dabar naudojame standartinį ciklą gautiems produktams atvaizduoti. Kiekvienas elementas bus apvyniotas į komponentą Link ir adresas bus kiekvienam savas (apie tai pakalbėsime vėliau). Atitinkamai, jei produktas neturi pavadinimo, bus rodomas 'Unnamed' pagal numatytuosius nustatymus. Taigi, atsižvelgdami į tai, kas pasakyta, dabar mūsų kodas funkcijai Root bus toks:

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

Jei mes dabar paleisime aplikaciją iš naujo ir nueisime į pagrindinį puslapį, pamatysime tik 'no products here ...', kadangi jokių produktų į saugyklą mes kol kas dar neįdėjome.

Paimkite aplikaciją, kurią sukūrėte užduotyse prie ankstesnių pamokų. Naudodamiesi pamokos medžiaga, pridėkite rodymą gautų iš įkėlimo įrankio duomenų su studentais, kaip aprašyta pamokoje.