URL Parameters का उपयोग
In this page:
<Route path="/items/:id" element={<ItemDetail />} />
function ItemDetail() {
const { id } = useParams();
return <p>{id}</p>;
}एक Dynamic Route Segment Define करना
एक path segment को colon से prefix करना, जैसे path='/users/:id', React Router को बताता है कि वह segment एक variable है, कोई literal string नहीं। उस shape से match करने वाला कोई भी URL, जैसे /users/5 या /users/42, इस single route definition से match होगा।
उदाहरण: Defining a Dynamic Route Segment
// Run in your local React project (npm install required)
import { Routes, Route } from 'react-router-dom';
function UserDetail() { return <p>Showing a user</p>; }
function AppRoutes() {
return (
<Routes>
<Route path="/users/:id" element={<UserDetail />} />
</Routes>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
useParams से Parameter पढ़ना
एक dynamic route द्वारा render किए component के अंदर, useParams() call करना एक object return करता है जिसकी keys path में colon-prefixed names से match करती हैं। path='/users/:id' के लिए, useParams() { id: 5 } जैसा कुछ return करता है जब URL /users/5 हो।
उदाहरण: Reading the Parameter with useParams
// Run in your local React project (npm install required)
import { useParams } from 'react-router-dom';
function UserDetail() {
const { id } = useParams();
return <p>Showing user with ID: {id}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
सही Data Fetch करने के लिए Params उपयोग करना
एक route param का सबसे common उपयोग उस ID का उपयोग करके एक list या API से matching item ढूंढना है। चूंकि useParams() आपको current ID directly देता है, आप इसे useEffect के अंदर उपयोग कर सकते हैं जब भी यह बदले corresponding data fetch या find करने के लिए।
उदाहरण: Using Params to Fetch the Right Data
// Run in your local React project (npm install required)
import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
function UserDetail() {
const { id } = useParams();
const [name, setName] = useState("");
useEffect(() => { setName("User #" + id); }, [id]);
return <p>{name}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Route definition में colon भूल जाना (path='/users/:id' न कि '/users/id')।
- Param string को numeric IDs के against compare करते समय number में convert न करना, चूंकि useParams हमेशा strings return करता है।
- यह मान लेना कि एक param हमेशा present है — एक route navigation पूरी तरह resolve होने से पहले render हो सकता है।
- एक route path segment जो colon से prefixed हो (जैसे :id) एक dynamic parameter बन जाता है।
- useParams() सभी matched parameters का एक object strings के रूप में return करता है, इनके names से keyed।
- Params एक Route definition को कई अलग URLs serve करने देते हैं (जैसे हर /users/:id)।
- Param strings को हमेशा parse/convert करें अगर आपको इन्हें numbers के against compare करना हो।
npm install react-router-dom चाहिए — इस sandbox में CDN से available नहीं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: