Query Parameters and Search State
Reading Query Parameters
useSearchParams() returns a URLSearchParams-like object representing everything after the '?' in the current URL. Calling .get(key) on it reads a specific parameter's value, similar to how useParams() reads route segments, but for the query string instead.
Note: searchParams.get(key) returns null if the key isn't present in the URL, not an empty string — check for that.
Warning: Query params are always strings, exactly like route params — convert them explicitly if you need a number or boolean.
Example: 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.
Updating Query Parameters
useSearchParams() also returns a setter function, used like setSearchParams({ key: value }), which updates the URL's query string and triggers a re-render with the new values — similar in spirit to useState's setter.
Note: Updating search params this way also updates the URL bar, making the current filter/search state shareable via a copied link.
Warning: Calling setSearchParams replaces the ENTIRE query string by default — include all params you want to keep, not just the one you're changing.
Example: 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) identify a specific resource and are part of the route's structure — different IDs conceptually mean different pages. Query params (?sort=asc) represent optional modifiers to the current page, like sorting or filtering, without changing which resource is being shown.
Note: A good rule of thumb: if removing the value would mean 'a different thing entirely', use a route param; if it just changes how the same thing is displayed, use a query param.
Warning: Overusing route params for things that are really just display options (like ?sort=) makes your route structure unnecessarily rigid.
Example: 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.
- Confusing query params (?sort=asc) with route params (/users/:id) — they're read with different hooks.
- Mutating the URLSearchParams object directly instead of using setSearchParams to update it.
- Forgetting that all values read from URLSearchParams are strings, same as route params.
- Query parameters are the ?key=value pairs after a URL's path, like /search?q=react.
- useSearchParams() returns a URLSearchParams object and a setter function, similar to useState.
- Reading a value uses searchParams.get(key); updating uses setSearchParams({...}).
- Query params are ideal for optional state that should be shareable via URL, like search terms or filters.
Requires npm install react-router-dom — not available via CDN in this sandbox.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: