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 ...' පමණි, මන්ද අපි තවමත් ගබඩාවේ කිසිදු නිෂ්පාදනයක් තැබුවේ නැත.

පෙර පාඩම් සඳහා ඔබ සාදන ලද ඇප් එක ගන්න. පාඩමේ ද්‍රව්‍ය භාවිතා කරමින්, පාඩමේ විස්තර කර ඇති පරිදි, ලෝඩර් එකෙන් ලැබෙන ශිෂ්‍ය දත්ත ප්‍රදර්ශනය කිරීම එක් කරන්න.