Why are important useParams library

useParams React Router ki ek bohot hi powerful Hook hai. Iska main kaam hai URL ke andar se Dynamic Values (jaise Product ID, Username, ya Order ID) ko nikalna.

Ecommerce website mein iska use sabse zyada Product Detail Page banane ke liye hota hai.

---

1. Ye Kyun Zaroori Hai?

Sochiye aapke paas 1000 products hain. Aap har product ke liye alag file (jaise iphone.jsx, samsung.jsx) nahi banayenge. Aap sirf ek component banayenge ProductDetail.jsx aur URL se ID read karke sahi data dikhayenge.

• URL Pattern: myshop.com/product/123
• useParams ka kaam: Is 123 ko pakadna aur aapko dena taaki aap Axios se us product ka data mangwa sakein.

---

2. Isse Setup Kaise Karte Hain? (2 Steps)

Step A: Route Define Karein (App.jsx)

Aapko :variableName ka use karna padta hai. Colon (:) ka matlab hai ki ye hissa badalta rahega.

JavaScript

<Routes>
  {/* Yahan :id ek placeholder hai */}
  <Route path="/product/:id" element={<ProductDetail />} />
</Routes>

Step B: Value Read Karein (ProductDetail.jsx)

Ab us component ke andar useParams ko call karein:

JavaScript

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

const ProductDetail = () => {
  // useParams() ek object return karta hai jisme URL ki values hoti hain
  const { id } = useParams(); 

  return (
    <div>
      <h2>Product ID: {id}</h2>
      <p>Ab hum Axios se ID {id} ka data fetch kar sakte hain.</p>
    </div>
  );
};

---

3. Asli Example (Axios ke saath)

Jab user kisi link par click karke /product/50 par aata hai, toh code aise kaam karta hai:

JavaScript

import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import axios from 'axios';

const ProductPage = () => {
  const { id } = useParams(); // URL se '50' nikal liya
  const [item, setItem] = useState(null);

  useEffect(() => {
    // Ab wahi ID backend ko bheji
    axios.get(`http://localhost:5000/api/products/${id}`)
      .then(res => setItem(res.data));
  }, [id]); // Jab ID badle, tab dobara fetch karo

  if (!item) return <p>Loading...</p>;

  return <h1>{item.title} - Price: {item.price}</h1>;
};

---

Key Points to Remember

Point	Description
Colon (:)	Route path mein colon lagana zaroori hai, warna wo normal text maan lega.
Object Destructuring	const { id } = useParams() likhna sabse asaan tarika hai.
Multiple Params	Aap ek se zyada params bhi le sakte hain: path="/category/:catName/product/:id"