Använda data från laddaren i React Router

I föregående lektion hämtade vi data från lagringen med hjälp av loader. För att kunna använda dessa data, använder vi hooken useLoaderData. Låt oss öppna filen root.jsx och lägga till hooken i importen:

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

I funktionen Root kommer vi nu att få data i konstanten products och arbeta med den. Om vi har några produkter kommer listan att visas, om inte, kommer vi att visa i ett stycke 'no products here ...'. I taggen nav använder vi nu en standardloop för att visa de hämtade produkterna. Varje element kommer att vara inslaget i komponenten Link och adressen kommer att vara sin egen för varje (vi kommer att prata om detta senare). Följaktligen, om produkten saknar namn, kommer 'Unnamed' att visas som standard. Så, med hänsyn till ovanstående, kommer vår kod för funktionen Root nu att se ut så här:

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

Om vi startar om applikationen nu och går till hemsidan, kommer vi att se bara 'no products here ...', eftersom inga produkter har lagts i lagringen ännu.

Ta applikationen som du skapade i uppgifterna till tidigare lektioner. Använd materialet från lektionen och lägg till visning av data som hämtats från laddaren med studenter, enligt beskrivningen i lektionen.