React Routerin lataajan saamien tietojen käyttö

Edellisellä oppitunnilla saimme tiedot tallennustilasta käyttämällä loader. Jotta voimme hyödyntää näitä tietoja, käytämme useLoaderData -hookkia. Avataan tiedosto root.jsx ja lisätään hookki importtiin:

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

Root-funktiossa saamme nyt tiedot vakioon products ja työskentelemme sen kanssa. Jos meillä on tuotteita, lista näytetään, jos ei, niin tulostamme kappaleeseen 'no products here ...'. nav -tagissa käytämme nyt vakiopykälää saadun tuotelistan tulostamiseen. Jokainen elementti kääritään Link -komponenttiin ja osoite on jokaisella oma (puhumme tästä myöhemmin). Vastaavasti, jos tuotteella ei ole nimeä, tulostuu oletuksena 'Unnamed'. Joten, ottaen huomioon edellä mainitun, nyt koodimme Root -funktiolle on tällainen:

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

Jos käynnistämme sovelluksen nyt uudelleen ja menemme etusivulle, näemme vain 'no products here ...', koska emme ole vielä laittaneet mitään tuotteita tallennustilaan.

Ota edellisten oppituntien tehtävissä luomasi sovellus. Hyödynnä oppitunnin materiaaleja ja lisää lataajasta saatujen tietojen näyttäminen opiskelijoista, kuten oppitunnilla kuvattiin.