Коришћење података добијених преко loader-а у React Router-у

У прошлом часу смо добили податке из складишта помоћу loader. Да би искористили те податке, користимо кук useLoaderData. Отворимо фајл root.jsx и додајмо кук у импорт:

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

У функцији Root ћемо сада добијати податке у константу products и радити са њом. Ако имамо неке производе, листа ће се приказати, ако нема, онда ћемо исписати у пасусу 'no products here ...'. У тегу nav сада користимо стандардну петљу за приказ добијених производа. Сваки елемент ће бити обавијен у компоненту Link и адреса ће бити за сваки своја (о овоме ћемо говорити касније). Дакле, ако производ нема назив, исписаће се 'Unnamed' подразумевано. Дакле, имајући у виду горе речено, сада наш код за функцију 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>
	);
}

Ако сада поново покренемо апликацију и одемо на почетну страницу, видећемо само 'no products here ...', јер нисмо још убацили никакве производе у складиште.

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