useSearchParams is a React Router hook for keeping application state in a URL query string. It returns a searchParams object for reading values and a setter for updating them, so users can link directly to a selected bookable and date. section 10.2 section 10.2.1
Use the hook in a component or wrap it in a domain-specific custom hook:
- Read values with searchParams.get("date") and searchParams.get("bookableId"). section 10.2.1
- Validate values before using them; the bookings example accepts valid dates and integer bookable IDs, treating invalid values as missing. section 10.2.1
- Update the query string by passing an object to setSearchParams; consumers re-render with the new URL state. section 10.2.2
- Pass {replace: true} when repeated controls such as a week picker should replace the current browser-history entry. section 10.2.2
Bookings page state
A URL such as /bookings?bookableId=1&date=2020-06-24 identifies both selections. A custom hook can expose sanitized values and a date updater: const [searchParams, setSearchParams] = useSearchParams(); const date = searchParams.get("date"); const bookableId = searchParams.get("bookableId"); setSearchParams({bookableId: 1, date: "2020-06-24"}, {replace: true}); section 10.2 section 10.2.2
const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("date");
searchParams.get("bookableId");
View the compact API pattern for obtaining the hook tuple and reading both query parameters. section 10.4
