অসাধারণ! এখন আমরা react-router-dom-এর Navigating সেকশনটি একদম ডকুমেন্টেশনের মতো সেকশন-ভিত্তিকভাবে, কিন্তু সহজ, প্রাঞ্জল ও বাংলায় লিখবো—যাতে আপনার রিয়্যাক্ট রাউটিং শেখা হয় মজা দিয়ে।

অধ্যায় ৩: Navigating (পথ খোঁজা সহজ ভাষায়)

React অ্যাপের বিভিন্ন পেজে যাওয়া-আসার জন্য আমাদের লাগে: 🔹 <Link> 🔹 <NavLink> 🔹 useNavigate() হুক

এই অধ্যায়ে আমরা একে একে সব বুঝে নেব, সহজ ভাষায় ও উদাহরণ দিয়ে।

🔰 পরিচিতি (Introduction)

React অ্যাপে এক পেজ থেকে আরেক পেজে যেতে আমরা নিচের তিনটি উপায় ব্যবহার করি:

• <Link>: সাধারণভাবে কোন পেজে যেতে
• <NavLink>: যদি জানতে চাই কোন লিংকটি “active” মানে এখন যে পেজে আছি সেটা দেখায়
• useNavigate(): যখন ইউজার ক্লিক না করেও কোড থেকে পেজ চেঞ্জ করতে চাই

🌟 NavLink — অ্যাক্টিভ লিংক দেখানোর জন্য

যদি আপনি চান যে ইউজার এখন কোন পেজে আছে সেটা স্টাইল করে দেখাতে, তাহলে <NavLink> ব্যবহার করুন।

📦 কোড উদাহরণ:

import { NavLink } from "react-router-dom";
 
export function MyAppNav() {
  return (
    <nav>
      <NavLink to="/" end>
        Home
      </NavLink>
      <NavLink to="/trending" end>
        Trending Concerts
      </NavLink>
      <NavLink to="/concerts">All Concerts</NavLink>
      <NavLink to="/account">Account</NavLink>
    </nav>
  );
}

🎨 CSS দিয়ে active লিংক আলাদা করে দেখানো:

a.active {
  color: red;
}

NavLink যখন অ্যাক্টিভ হয়, তখন অটোমেটিক .active ক্লাস পায়। আপনি চাইলে এটা দিয়ে স্টাইল করতে পারেন।

🧠 Active স্টেট অনুযায়ী কাস্টম স্টাইল বা কনটেন্ট

NavLink আপনাকে className, style, এমনকি children এর ভেতরেও ফাংশন হিসেবে isActive দেয়।

১. className দিয়ে:

<NavLink
  to="/messages"
  className={({ isActive }) => (isActive ? "text-red-500" : "text-black")}
>
  Messages
</NavLink>

২. style দিয়ে:

<NavLink
  to="/messages"
  style={({ isActive }) => ({
    color: isActive ? "red" : "black",
  })}
>
  Messages
</NavLink>

৩. children দিয়ে কনটেন্ট পাল্টানো:

<NavLink to="/message">
  {({ isActive }) => (
    <span className={isActive ? "active" : ""}>
      {isActive ? "👉" : ""} Tasks
    </span>
  )}
</NavLink>

এভাবে আপনি নিজের মতো করে অ্যাক্টিভ স্টেট অনুযায়ী সব কিছু কাস্টমাইজ করতে পারেন।

🧷 Link — সাধারণ লিংকের জন্য

যদি আপনি শুধুমাত্র একটি পেজে যেতে চান, কিন্তু অ্যাক্টিভ লিংকের কোনো দরকার নেই, তাহলে <Link> ব্যবহার করুন।

✅ উদাহরণ:

import { Link } from "react-router-dom";
 
export function LoggedOutMessage() {
  return (
    <p>
      আপনি লগআউট হয়ে গেছেন। <Link to="/login">আবার লগইন করুন</Link>
    </p>
  );
}

এটা সাধারণভাবে ইউজারকে অন্য কোনো পেজে নিয়ে যেতে ব্যবহার হয়।

🚀 useNavigate — ইউজার ক্লিক না করেও রিডাইরেক্ট করার জন্য

এটা হচ্ছে একটা হুক, যা আপনি ব্যবহার করবেন তখন, যখন কোড থেকে ইউজারকে কোথাও পাঠাতে চান — ক্লিক ছাড়াই।

যেমন:

• লগইন সফল হলে ড্যাশবোর্ডে পাঠানো
• অটো-লগআউট করে হোমে পাঠানো
• টাইম শেষ হয়ে গেলে কুইজ সাবমিট করে রেজাল্টে পাঠানো

🧪 উদাহরণ:

import { useNavigate } from "react-router-dom";
 
export function LoginPage() {
  const navigate = useNavigate();
 
  return (
    <>
      <MyHeader />
      <MyLoginForm
        onSuccess={() => {
          navigate("/dashboard");
        }}
      />
      <MyFooter />
    </>
  );
}

এখানে, onSuccess ইভেন্টে আমরা navigate("/dashboard") দিয়ে ইউজারকে ড্যাশবোর্ডে পাঠাচ্ছি।

🧭 শেষ কথা

এই অধ্যায়ে আপনি শিখলেন—

🔜 পরবর্তী অধ্যায়: URL Values

আপনি যদি চান, এই ব্লগ পোস্টটি Markdown বা Nextra ফরম্যাটে সাজিয়ে দেই—তাহলে জানিয়ে দিন, আমি সেটাও করে দেব। 😊