ReactJS-এ সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA) তৈরি করার সময় বিভিন্ন পৃষ্ঠার মধ্যে নেভিগেশন পরিচালনা করার জন্য Link এবং NavLink কম্পোনেন্ট ব্যবহার করা হয়। এই কম্পোনেন্ট দুটি React Router লাইব্রেরির অংশ, যা URL পরিবর্তন এবং পৃষ্ঠার রেন্ডারিং করে, তবে পেজটি সম্পূর্ণভাবে পুনরায় লোড না করে। এর ফলে অ্যাপ্লিকেশন দ্রুত ও আরও ব্যবহারকারী-বান্ধব হয়ে ওঠে।
Link কম্পোনেন্ট
React Router-এর Link কম্পোনেন্ট একটি প্রাথমিক নেভিগেশন উপকরণ, যা পেজের মধ্যে ভিজ্যুয়াল নেভিগেশন করতে সাহায্য করে। এটি HTML <a> ট্যাগের মতো কাজ করে, তবে এটি শুধুমাত্র URL পরিবর্তন করে এবং React অ্যাপ্লিকেশনটির UI পুনরায় রেন্ডার করে, কিন্তু পেজ সম্পূর্ণরূপে রিলোড হয় না।
Link এর বৈশিষ্ট্য
- পেজ রিলোড বন্ধ করে: সাধারণ HTML
<a>ট্যাগ ব্যবহার করলে ব্রাউজার পেজ রিলোড করে, কিন্তুLinkকম্পোনেন্ট তা করে না, তাই অ্যাপ্লিকেশন দ্রুত চলে। - React Router-এর রাউটিং ফিচার:
toপ্রপার্টির মাধ্যমে আপনি যেই রাউটের দিকে নেভিগেট করতে চান, তা উল্লেখ করতে পারবেন।
Link ব্যবহারের উদাহরণ
import React from 'react';
import { Link } from 'react-router-dom';
function Navigation() {
return (
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</div>
);
}
export default Navigation;
এখানে, Link কম্পোনেন্টটি to প্রপস ব্যবহার করে নেভিগেট করবে। উদাহরণস্বরূপ, /about লিঙ্কটি ক্লিক করলে React অ্যাপ্লিকেশনটি সেই পৃষ্ঠাতে চলে যাবে, কিন্তু পুরো পেজটি পুনরায় লোড হবে না।
NavLink কম্পোনেন্ট
NavLink কম্পোনেন্টও React Router-এর অংশ, যা Link এর মতো কাজ করে, তবে এতে অতিরিক্ত কিছু বৈশিষ্ট্য রয়েছে। বিশেষত, NavLink কম্পোনেন্টটি অ্যাকটিভ লিঙ্ক চিহ্নিত করতে ব্যবহার করা হয়। এটি স্বয়ংক্রিয়ভাবে সেই লিঙ্কের স্টাইল পরিবর্তন করে, যেটি বর্তমানে অ্যাকটিভ বা নির্বাচিত থাকে।
NavLink এর বৈশিষ্ট্য
- অ্যাকটিভ স্টাইলিং: যখন কোনো
NavLinkকম্পোনেন্ট অ্যাকটিভ থাকে, তখন এটি স্বয়ংক্রিয়ভাবে CSS ক্লাস (activeক্লাস) অ্যাপ্লাই করে, যার মাধ্যমে আপনি CSS স্টাইল পরিবর্তন করতে পারেন। - এডভান্সড ফিচার:
NavLinkকম্পোনেন্টের মাধ্যমে, আপনি আরো বিস্তারিত কনফিগারেশন যেমনactiveClassName,activeStyle,exactইত্যাদি ব্যবহার করতে পারেন।
NavLink ব্যবহারের উদাহরণ
import React from 'react';
import { NavLink } from 'react-router-dom';
function Navigation() {
return (
<div>
<ul>
<li><NavLink to="/" exact activeClassName="active-link">Home</NavLink></li>
<li><NavLink to="/about" activeClassName="active-link">About</NavLink></li>
<li><NavLink to="/contact" activeClassName="active-link">Contact</NavLink></li>
</ul>
</div>
);
}
export default Navigation;
এখানে, NavLink কম্পোনেন্ট ব্যবহার করা হয়েছে। যখন ইউজার কোনও লিঙ্কে ক্লিক করে, তখন সেই লিঙ্কে active ক্লাস যোগ হবে।
অ্যাকটিভ লিঙ্ক স্টাইলিং
.active-link {
font-weight: bold;
color: green;
}
এখানে, যখন কোনো লিঙ্ক অ্যাকটিভ হবে, তখন তার স্টাইল পরিবর্তিত হবে এবং active-link ক্লাসটি অ্যাপ্লাই হবে, যার মাধ্যমে লিঙ্কটির রঙ এবং ফন্ট বোল্ড হবে।
Link এবং NavLink এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Link | NavLink |
|---|---|---|
| মূল উদ্দেশ্য | সাধারণ নেভিগেশন | নেভিগেশন এবং অ্যাকটিভ লিঙ্ক হাইলাইট করা |
| অ্যাকটিভ স্টাইলিং | নেই | activeClassName, activeStyle ব্যবহার করা যায় |
| ব্যবহার | সাধারণ পৃষ্ঠার নেভিগেশন | অ্যাকটিভ লিঙ্কের হাইলাইট এবং অ্যাকটিভ স্টাইলিং |
| অ্যাকটিভ ক্লাস | না | activeClassName এবং activeStyle দ্বারা কাস্টমাইজড |
উপসংহার
Link এবং NavLink ReactJS অ্যাপ্লিকেশনে নেভিগেশন পরিচালনা করার জন্য খুবই গুরুত্বপূর্ণ কম্পোনেন্ট। Link ব্যবহার করে আপনি অ্যাপ্লিকেশন এর মধ্যে পেজ নেভিগেট করতে পারেন, যেখানে NavLink অ্যাকটিভ লিঙ্কগুলোর জন্য বিশেষভাবে উপযোগী, যেখানে আপনি একটি লিঙ্কের নির্বাচিত অবস্থা হাইলাইট করতে পারেন। যখন আপনার অ্যাপ্লিকেশনে বিভিন্ন লিঙ্কের স্টাইল পরিবর্তন বা হাইলাইট করার প্রয়োজন হয়, তখন NavLink ব্যবহার করা সবচেয়ে উপযুক্ত।
Read more
