How do query parameters work?

Query (search) parameters are the ?key=value&key2=value2 portion of a URL. Unlike route params (see [What are dynamic routes and what are route parameters?](#what-are-dynamic-routes-and-what-are-route-parameters)), they aren't part of the route's path definition — they're read and updated with the useSearchParams hook, which mirrors the browser's URLSearchParams API.

     import { useSearchParams } from "react-router-dom";

     function ProductList() {
       // URL: /products?category=shoes&sort=price&page=2
       const [searchParams, setSearchParams] = useSearchParams();

       const category = searchParams.get("category"); // "shoes"
       const sort = searchParams.get("sort");           // "price"
       const page = Number(searchParams.get("page") ?? "1"); // params are always strings

       function handleSortChange(nextSort) {
         // Updates the URL (?sort=...) and triggers a re-render with the new value
         setSearchParams((prev) => {
           prev.set("sort", nextSort);
           return prev;
         });
       }

       return (
         <div>
           <select value={sort ?? ""} onChange={(e) => handleSortChange(e.target.value)}>
             <option value="price">Price</option>
             <option value="rating">Rating</option>
           </select>
           {/* render products filtered by category, sorted by sort, paginated by page */}
         </div>
       );
     }
     

Key points:

• useSearchParams() returns [searchParams, setSearchParams], similar to useState — searchParams is a read-only URLSearchParams instance (.get(), .getAll(), .has()), and setSearchParams() updates the URL (and re-renders).
• Updating search params pushes a new history entry by default; pass { replace: true } as a second argument to setSearchParams to avoid cluttering back/forward history (useful for things like live search-as-you-type).
• Query params are ideal for optional, non-hierarchical, shareable UI state — filters, sorting, pagination, search text — because the resulting URL can be bookmarked/shared and still reproduces the same view.
• Unlike route params, missing query params don't cause a 404/no-match; searchParams.get("missing") simply returns null, so always provide sensible defaults.

## Old Q&A