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 ...' দেখতে পাব, কারণ স্টোরে আমরা এখনও কোনো পণ্য রাখিনি।

আপনার আগের পাঠের অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি নিন। পাঠের উপকরণ ব্যবহার করে, লোডার থেকে প্রাপ্ত শিক্ষার্থীদের ডেটা প্রদর্শন যোগ করুন, যেমন পাঠে বর্ণিত হয়েছে।