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