React Router-এ সক্রিয় লিঙ্ক হাইলাইট করা

ধরুন আমরা আমাদের অ্যাপ্লিকেশনে বেশ কয়েকটি পণ্য যোগ করেছি এবং প্রতিটি পণ্য দেখছি। তাহলে আমরা কীভাবে বুঝব আমরা বর্তমানে কোন পণ্যের পৃষ্ঠায় আছি? আসুন তালিকায় সেই পণ্যটি হাইলাইট করি, উদাহরণস্বরূপ গাঢ় ফন্ট এবং বাদামী রং দিয়ে, এবং যদি লিঙ্ক এখনও লোড হচ্ছে, তবে ধূসর রং দিয়ে।

শুরুতে হোম পেজে যান, তালিকায় 4টি পণ্য যোগ করুন এবং তাদের প্রতিটির জন্য ডেটা লিখুন। যেকোনো নাম দিন।

সক্রিয় লিঙ্ক হাইলাইট করতে আমাদের সাহায্য করবে NavLink কম্পোনেন্ট, এটি হলো Link কম্পোনেন্টের একটি প্রকারভেদ, যা ডেটার অবস্থা সম্পর্কে জানে। সাধারণত এটি ব্যবহার করা হয় নেভিগেশন মেনু তৈরি করার সময়।

আসুন root.jsx খুলি এবং ইম্পোর্ট করি NavLink (ইম্পোর্ট করা Link ❬remove❭ করতে ভুলবেন না, নাহলে React অভিযোগ করতে পারে, কারণ আমরা এটা আর ব্যবহার করছি না):

import { NavLink } from 'react-router-dom';

তারপর লেআউটে Link কম্পোনেন্টটিকে NavLink দিয়ে প্রতিস্থাপন করি:

<NavLink key={product.id} to={`products/${product.id}`}>
	{product.name ? product.name : <i>unnamed</i>}
</NavLink>

এবং এতে className প্রপস যোগ করি, আর শর্তসাপেক্ষ লজিক ব্যবহার করি। যদি পৃষ্ঠাটি লোড হয়ে যায়, তাহলে লিঙ্কটি সক্রিয় অবস্থায় চলে যাবে, যদি লোড হচ্ছে, তাহলে লোডিং অবস্থায়, যদি কিছুই না ঘটে, তবে আগের মতোই থাকবে। এর উপর নির্ভর করে লিঙ্কের ক্লাস পরিবর্তিত হবে:

<NavLink
	key={product.id}
	to={`products/${product.id}`}
	className={({ isActive, isPending }) =>
		isActive ? 'active' : isPending ? 'loading' : ''
	}
>
	{product.name ? product.name : <i>Unnamed</i>}
</NavLink>

আমাদের বাকি আছে active এবং loading ক্লাসগুলোর জন্য স্টাইল আমাদের css ফাইলে যোগ করা:

a.active {
	font-weight: bold;
	color: brown;
}

a.loading {
	color: gray;
}

হয়েছে! এখন তালিকা থেকে পণ্যগুলোতে ক্লিক করুন।

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