React Router mein useParams Hook: Ek Complete Guide 🚀

React mein Single Page Applications (SPA) banate waqt, humein aksar aise pages ki zaroorat padti hai jo Dynamic hon. Jaise ki ek Ecommerce site par hazaron products ke liye sirf ek “Product Detail” page. Yahi kaam aasaan banata hai useParams hook.

1. useParams Kya Hai?

useParams React Router library ki ek inbuilt Hook hai. Iska main kaam browser ke URL se dynamic parameters (values) ko nikalna hai.

Maan lijiye aapka URL hai: myshop.com/product/101

Yahan 101 ek ID hai jo har product ke liye badlegi. useParams isi 101 ko pakad kar aapke component ko deta hai.

---

2. Iska Use Kyun Karein?

Bina useParams ke, aapko har product ke liye alag file banani padegi (Product1.jsx, Product2.jsx…), jo ki namumkin hai. Is hook ki madad se aap ek “Template” banate hain jo kisi bhi ID ka data dikha sake.

---

3. Step-by-Step Implementation

Step 1: Dynamic Route Setup Karein (App.jsx)

Sabse pehle aapko apne Route mein ek Colon (:) use karna padta hai. Ye colon hi batata hai ki ye hissa dynamic hai.

JavaScript

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import ProductDetail from './ProductDetail';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* ':id' ek variable name hai jise hum useParams se access karenge */}
        <Route path="/product/:id" element={<ProductDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

Step 2: Component mein Value Access Karein (ProductDetail.jsx)

Ab us component ke andar useParams ko import karein aur use call karein.

JavaScript

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

const ProductDetail = () => {
  // useParams ek object return karta hai
  // Hum destructuring karke 'id' nikal rahe hain
  const { id } = useParams();

  return (
    <div style={{ padding: '20px' }}>
      <h1>Product Details Page</h1>
      <p>Aap abhi Product ID: <strong>{id}</strong> dekh rahe hain.</p>
    </div>
  );
};

---

4. Real-World Use Case (API Fetching)

Blog ya Ecommerce site mein hum is ID ka use karke Axios se data mangwate hain:

JavaScript

useEffect(() => {
  axios.get(`https://api.example.com/products/${id}`)
    .then(res => setProduct(res.data));
}, [id]); // Jab ID badlegi, tab dobara data fetch hoga

---

5. Summary Table

Feature	Details
Library	react-router-dom
Syntax	const { paramName } = useParams();
Route Path	/path/:paramName (Colon lagana zaroori hai)
Main Benefit	Ek hi component ko hazaron pages ke liye use karna.

---

Conclusion

useParams React developers ke liye ek vardaan hai. Ye aapke code ko clean rakhta hai aur website ko scalable banata hai. Agar aap ek Ecommerce site ya Blog bana rahe hain, toh iske bina kaam chalna mushkil hai!