Query Parameters और Search State
const [searchParams, setSearchParams] = useSearchParams();
const value = searchParams.get("key");
setSearchParams({ key: "newValue" });Query Parameters पढ़ना
useSearchParams() एक URLSearchParams जैसा object return करता है जो current URL में '?' के बाद की हर चीज़ represent करता है। इस पर .get(key) call करना किसी specific parameter की value पढ़ता है, कुछ उसी तरह जैसे useParams() route segments पढ़ता है, लेकिन query string के लिए।
उदाहरण: Reading Query Parameters
// Run in your local React project (npm install required)
import { useSearchParams } from 'react-router-dom';
function SearchResults() {
const [searchParams] = useSearchParams();
const query = searchParams.get('q') || '';
return <p>Searching for: {query}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Query Parameters अपडेट करना
useSearchParams() एक setter function भी return करता है, जो setSearchParams({ key: value }) जैसे उपयोग होता है, जो URL की query string update करता है और नई values के साथ एक re-render trigger करता है — कुछ useState के setter जैसी spirit में।
उदाहरण: Updating Query Parameters
// Run in your local React project (npm install required)
import { useSearchParams } from 'react-router-dom';
function SortControl() {
const [searchParams, setSearchParams] = useSearchParams();
const sort = searchParams.get('sort') || 'asc';
return (
<button onClick={() => setSearchParams({ sort: sort === 'asc' ? 'desc' : 'asc' })}>
Sort: {sort}
</button>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Query Params vs. Route Params
Route params (/users/:id) एक specific resource identify करते हैं और route के structure का हिस्सा हैं — अलग IDs conceptually अलग pages मानी जाती हैं। Query params (?sort=asc) current page के लिए optional modifiers represent करते हैं, जैसे sorting या filtering, बिना यह बदले कि कौन सा resource दिखाया जा रहा है।
उदाहरण: Query Params vs. Route Params
// Run in your local React project (npm install required)
import { useParams, useSearchParams } from 'react-router-dom';
// URL: /users/5?sort=asc
function UserPosts() {
const { id } = useParams(); // route param: "5"
const [searchParams] = useSearchParams(); // query param
const sort = searchParams.get('sort'); // "asc"
return <p>User {id}'s posts, sorted {sort}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Query params (?sort=asc) को route params (/users/:id) के साथ confuse करना — वे अलग hooks से पढ़े जाते हैं।
- URLSearchParams object को directly mutate करना, इसे update करने के लिए setSearchParams उपयोग करने के बजाय।
- यह भूल जाना कि URLSearchParams से पढ़ी हर value string होती है, route params जैसे ही।
- Query parameters एक URL के path के बाद के ?key=value pairs हैं, जैसे /search?q=react।
- useSearchParams() एक URLSearchParams object और एक setter function return करता है, useState जैसा।
- एक value पढ़ने के लिए searchParams.get(key) उपयोग होता है; update करने के लिए setSearchParams({...})।
- Query params optional state के लिए ideal हैं जिसे URL के through shareable होना चाहिए, जैसे search terms या filters।
npm install react-router-dom चाहिए — इस sandbox में CDN से उपलब्ध नहीं है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: