Выкарыстанне даных, атрыманых загрузчыкам у 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 ...', паколькі ніякія прадукты ў сховішча мы яшчэ пакуль не паклалі.

Вазьміце прыкладанне, створанае вамі ў заданнях да мінулых урокаў. Карыстаючыся матэрыяламі ўрока, дадайце адлюстраванне атрыманых з загрузчыка даных са студэнтамі, як апісана ў уроку.