Dynamic Routing & URL Params in React.js – Complete Beginner Friendly Guide

React অ্যাপে আমরা যখন কোন data-এর specific details page দেখাতে চাই, তখন URL-এ একটি dynamic অংশ ব্যাবহার করা হয়। এই dynamic অংশকে বলা হয় URL Params এবং এই ধরনের routing কে বলা হয় Dynamic Routing।

উদাহরণ: /product/10 → Product ID = 10 /user/5 → User ID = 5

📌 Dynamic Route কী?

Dynamic Route হলো এমন route যেখানে path-এর কিছু অংশ changeable বা dynamic। এই dynamic অংশ keyword দিয়ে define করা হয় (যেমনঃ :id).

<Route path="/product/:id" element={<ProductDetails />} />

এখানে :id হলো dynamic parameter। যে ID আসবে তার উপর ভিত্তি করে component নতুন data দেখাবে।

📌 URL Params কী?

URL এর dynamic অংশ React Router দ্বারা পাওয়া যায় useParams() hook ব্যবহার করে।

উদাহরণ URL: http://localhost:3000/product/15 এখানে "15" হবে url param।

📌 Step-by-step: Dynamic Route Setup

1.Route Create করুন:

// App.js
import { Routes, Route } from "react-router-dom";
import ProductDetails from "./pages/ProductDetails";

function App() {
  return (
    <Routes>
      <Route path="/product/:id" element={<ProductDetails />} />
    </Routes>
  );
}

export default App;
    

এখানে :id হলো dynamic অংশ।

2. URL Params পড়া – useParams()

useParams() একটি object return করে যেখানে সব dynamic params থাকে।

// ProductDetails.js
import { useParams } from "react-router-dom";

function ProductDetails() {
  const { id } = useParams();

  return (
    <div>
      <h2>Product Details Page</h2>
      <p>Product ID: {id}</p>
    </div>
  );
}

export default ProductDetails;
    

যদি URL হয় /product/20 তাহলে:

{ id: "20" }

📌 Dynamic Routing Real-Life Example

ধরুন আপনার একটি products list আছে:

const products = [
  { id: 1, name: "Laptop" },
  { id: 2, name: "Mobile" },
  { id: 3, name: "Headphones" }
];
  

এখন প্রতিটি product-এর details page link করা হবে:

// ProductList.js
import { Link } from "react-router-dom";

function ProductList() {
  return (
    <div>
      <h2>All Products</h2>
      {products.map((item) => (
        <div key={item.id}>
          <Link to={`/product/${item.id}`}>{item.name}</Link>
        </div>
      ))}
    </div>
  );
}

export default ProductList;
    

এখন যখন user "Laptop" এ click করবে তখন যাবে /product/1 এ, আর ID অনুযায়ী details দেখাবে।

📌 Multiple URL Params

একাধিক params থাকা সম্ভব:

<Route path="/user/:userId/post/:postId" element={<UserPostDetails />} />

import { useParams } from "react-router-dom";

function UserPostDetails() {
  const { userId, postId } = useParams();

  return (
    <div>
      <h2>User: {userId}</h2>
      <p>Post: {postId}</p>
    </div>
  );
}
    

📌 Optional Params

URL param optional করা যায়:

<Route path="/blog/:id?" element={<BlogPage />} />

এখন URL হতে পারে: ✔ /blog ✔ /blog/20

📌 Query Params vs URL Params

📌 useSearchParams (Bonus)

import { useSearchParams } from "react-router-dom";

function FilterPage() {
  const [searchParams] = useSearchParams();
  const category = searchParams.get("category");

  return <h2>Category: {category}</h2>;
}
    

URL: /products?category=mobile

📌 Summary (Easy Review)

• Dynamic route হলো changeable URL part
• :id এর মতো keyword দিয়ে define করা হয়
• useParams() দিয়ে param পড়া হয়
• E-commerce, Blog, Social Media সকল অ্যাপে ব্যবহার হয়
• Multiple, Optional params ও Query params support করে

এই tutorial আপনাকে React এর dynamic routing & URL param system সহজভাবে শেখাবে।