React Router-däki ýükleýjiniň alan maglumatlaryny ulanmak

Öňki sapakda biz loader kömegi bilen amalyýet ýatyna maglumat aldyk. Bu maglumatlary ulanmak üçin, biz useLoaderData çeňňegini ulanarys. root.jsx faýlyny açalyň we çeňňegi import edeliň:

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

Root funksiýasynda indi maglumatlary products konstantasynda alarys we onuň bilen işleris. Eger bizde ähli önümler bolsa, sanaw görkeziler, ýok bolsa, 'no products here ...' abzasda görkeziler. nav teginde indi alnan önümleri görkezmek üçin standart aýlawy ulanarys. Her element Link komponentine görükdiriler we her biriniň öz adresi bolar (bu barada soňrak gürleris). Şonuň ýaly, eger önümiň ady ýok bolsa, deslapky ýagdaýda 'Unnamed' görkeziler. Şeýlelik bilen, ýokarda aýdylanlary göz öňünde tutup, indi Root funksiýasy üçin kodymyz şeýle bolar:

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

Eger indi aplikasiýamyzy gaýtadan işledip, esasy sahypa girsek, diňe 'no products here ...' göreris, sebäbi amalyýet ýatyna heniz hiç hili önüm goşmadyk.

Öňki sapaklardaky tabşyryklaryňyzda döreden aplikasiýaňyzy alyň. Sapak materiýalaryny ulanyp, ýükleýjiden alnan talyp maglumatlaryny sapakda beýan edilişi ýaly görkeziň.