Користење на податоците добиени од loader во React Router

Во претходната лекција, ги добивме податоците од store-то користејќи loader. За да ги искористиме овие податоци, ќе го користиме hook-от useLoaderData. Ајде да ја отвориме датотеката root.jsx и да го додадеме hook-от во import-от:

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

Во функцијата Root, сега ќе ги добиеме податоците во константата products и ќе работиме со неа. Ако имаме некои продукти, тогаш листата ќе се прикаже, ако нема, тогаш ќе испечатиме во параграф 'no products here ...'. Во тегот nav сега користиме стандарден циклус за приказ на добиените продукти. Секој елемент ќе биде обвиен во компонентата Link и адресата ќе биде за секој своја (за ова ќе зборуваме подоцна). Соодветно, ако производот нема име, тогаш ќе се прикаже 'Unnamed' по default. Значи, земајќи го предвид горенаведеното, сега нашиот код за функцијата Root ќе изгледа вака:

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

Ако сега го рестартираме app-от и одиме на home page-от, ќе видиме само 'no products here ...', бидејќи никакви продукти во store-то сеуште не сме ги ставиле.

Земете го app-от што го креиравте во задачите од претходните лекции. Користејќи ги материјалите од лекцијата, додадете приказ на податоците добиени од loader со студенти, како што е опишано во лекцијата.