Dynamic Routes
Route, PATH, MEIN, :paramName, SYNTAX, SE, DYNAMIC, SEGMENTS, DEFINE, KIYE, JAATE, HAIN — jaise, /products/:productId. useParams() HOOK, SE, COMPONENT, KE, ANDAR, URL, SE, YE, VALUES, EXTRACT, KI, JA, SAKTI, HAIN.
useSearchParams() HOOK, QUERY, STRING, PARAMETERS, (jaise, ?sort=price) ko, READ/UPDATE, KARNE, KE, LIYE, USE, HOTA, hai — DYNAMIC, SEGMENTS, SE, ALAG, CONCEPT, hai, LEKIN, AKSAR, SAATH, MEIN, USE, HOTA, hai.
<Routes>
<Route path="/products/:productId" element={<ProductDetail />} />
</Routes>
function ProductDetail() {
const { productId } = useParams(); // URL se, EXTRACT
const [searchParams] = useSearchParams();
const sortBy = searchParams.get("sort"); // ?sort=price se
return <h2>Product #{productId}</h2>;
}
// URL: /products/42?sort=price
// productId = "42", sortBy = "price"- :paramName syntax = URL mein, DYNAMIC segments, DEFINE karta hai
- useParams() = path parameters, EXTRACT karta hai (STRINGS)
- useSearchParams() = query string parameters, READ/UPDATE karta hai
react-router-dom v6.4+ mein, path="/products/:id?" SE, EK, PARAMETER, KO, OPTIONAL, BANAYA, JA, SAKTA, hai — /products, aur, /products/42, DONO, SAME, ROUTE, MATCH, KARENGE.
<Route path="/products/:id?" element={<Products />} />path="*" (jaise, NotFound, ROUTE, MEIN, USE, HOTA, hai), KISI, BHI, UNMATCHED, PATH, KO, CATCH, KARTA, hai — HAMESHA, Routes, KA, LAST, CHILD, HONA, CHAHIYE, TAAKI, SPECIFIC, ROUTES, PEHLE, MATCH, HO, SAKEIN.
- path="*" = koi, bhi, unmatched, URL, catch, karta hai
- Hamesha, LAST, route, ke, roop, mein, define, karo