Дар React Router аз маълумоти гирифташуда тавассути loader истифода бурдан

Дар дарси гузашта мо маълумотро аз ҳофизаи барнома тавассути 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 маълумотро бо донишҷӯён, тавре ки дар дарс тавзеҳ дода шудааст, илова кунед.