Managing State in URL Search Params
Sync filters, sort, and pagination to the URL with useSearchParams.
Why Store State in the URL?
Filters, search queries, sort orders, and pagination belong in the URL so users can bookmark, share, and navigate back to the same view without losing state.
useSearchParams Hook
useSearchParams() returns the current URLSearchParams instance and a setter function, similar to useState but backed by the URL query string.
import { useSearchParams } from 'react-router-dom';
function ProductList() {
const [searchParams, setSearchParams] = useSearchParams();
const query = searchParams.get('q') || '';
const page = Number(searchParams.get('page') || 1);
// ...
}All lessons in this course
- Nested Routes & Outlet Layouts
- Loaders & Actions (Data Router API)
- Protected Routes & Auth Guards
- Managing State in URL Search Params