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

📌 URL Values – React Router এ ইউআরএল থেকে তথ্য পড়ার সহজ উপায়

React Router ব্যবহার করলে আমরা অনেক সময় URL থেকে ডেটা পড়ে আমাদের অ্যাপকে ডাইনামিক করতে চাই। এই ডেটাগুলোকে বলে URL Values। এই টপিকে আমরা তিনটা গুরুত্বপূর্ণ জিনিস শিখব:

1. Route Params
2. URL Search Params
3. Location Object

চলুন, ধাপে ধাপে শিখি।

১. 🛣️ Route Params — URL-এর ডাইনামিক অংশ থেকে মান (value) পাওয়া

আমরা যদি চাই URL-এ কিছু ডাইনামিক অংশ থাকে, যেমন /concerts/dhaka বা /concerts/chittagong, তাহলে সেটা করার জন্য আমরা :paramName ব্যবহার করি।

উদাহরণ:

<Route path="/concerts/:city" element={<City />} />

এখানে :city হলো ডাইনামিক অংশ। ইউজার যদি /concerts/dhaka URL-এ যায়, তাহলে city এর মান হবে dhaka।

এই ভ্যালুটা আমরা useParams() হুক দিয়ে পেতে পারি।

কোড:

import { useParams } from "react-router";
 
function City() {
  let { city } = useParams();
  let data = useFakeDataLibrary(`/api/v2/cities/${city}`);
 
  return (
    <div>
      <h2>{city} শহরের তথ্য</h2>
      {/* ডেটা দেখানোর জন্য কনটেন্ট */}
    </div>
  );
}

👉 মনে রাখবেন, useParams() একটা অবজেক্ট রিটার্ন করে, যেখানে city হচ্ছে সেই ডাইনামিক অংশের নাম।

২. 🔍 URL Search Params — ? চিহ্নের পরের ডেটা পড়া

অনেক সময় URL এ আমরা কিছু কুইরি প্যারামিটার পাঠাই, যেমন:

/search?q=react

এখানে q=react হলো একটা search param।

React Router এ আমরা useSearchParams() হুক ব্যবহার করে এসব ডেটা পড়তে পারি।

উদাহরণ:

import { useSearchParams } from "react-router-dom";
 
function SearchResults() {
  let [searchParams] = useSearchParams();
  let query = searchParams.get("q");
 
  return (
    <div>
      <p>
        আপনি সার্চ করেছেন: <i>{query}</i>
      </p>
      <FakeSearchResults />
    </div>
  );
}

👉 useSearchParams() থেকে আমরা URLSearchParams অবজেক্ট পাই, যেটা থেকে .get("key") দিয়ে যেকোনো ভ্যালু বের করা যায়।

৩. 🧭 Location Object — বর্তমান URL এর পূর্ণ তথ্য

React Router useLocation() হুকের মাধ্যমে আপনাকে একটা location object দেয়, যেখানে URL সম্পর্কিত অনেক দরকারি তথ্য থাকে।

এটা অনেক কাজে লাগে, যেমন:

• analytics পাঠাতে
• স্ক্রল পজিশন রিস্টোর করতে
• নতুন পেজে নেভিগেট হলে কিছু কাজ চালাতে

উদাহরণ ১: Analytics

import { useLocation } from "react-router-dom";
import { useEffect } from "react";
 
function useAnalytics() {
  let location = useLocation();
 
  useEffect(() => {
    sendFakeAnalytics(location.pathname);
  }, [location]);
}

👉 এখানে, যখনই ইউজার নতুন কোনো পেজে যায়, তখন location.pathname আপডেট হয়, আর সেটা আমরা ধরে Analytics পাঠিয়ে দেই।

উদাহরণ ২: Scroll Restoration

import { useLocation } from "react-router-dom";
import { useEffect } from "react";
 
function useScrollRestoration() {
  let location = useLocation();
 
  useEffect(() => {
    fakeRestoreScroll(location.key);
  }, [location]);
}

👉 প্রতিবার নতুন পেজে গেলে আলাদা location.key তৈরি হয়, যেটা দিয়ে আমরা আগের স্ক্রল পজিশন আবার রিস্টোর করতে পারি।

✨ সংক্ষেপে

✅ উপসংহার

React Router আমাদের ইউআরএল থেকে দরকারি ডেটা বের করার জন্য সুন্দর ও শক্তিশালী হুক দেয় — useParams, useSearchParams, এবং useLocation। এগুলোর ব্যবহার ঠিকঠাক জানলে আপনি খুব সহজেই ডাইনামিক রাউটিং করতে পারবেন।

🟢 আপনি চাইলে এই লেখাটি ব্লগ পোস্ট বা বইয়ের অধ্যায় হিসেবে ব্যবহার করতে পারেন। চাইলে আমি Markdown ফরম্যাটেও সাজিয়ে দিতে পারি। আরেকটি টপিকের দরকার হলে শুধু বলুন, আমি প্রস্তুত! 💻✍️