Using search parameters

In this section, we will learn about search parameters in React Router and use them to implement a search feature in the app.

Understanding search parameters

Search parameters are part of a URL that comes after the ? character and separated by the & character. Search parameters are sometimes referred to as query parameters. In the following URL, type and when are search parameters: https://somewhere.com/?type=sometype&when=recent.

React Router has a hook that returns functions for getting and setting search parameters called useSearchParams:

const [searchParams, setSearchParams] = useSearchParams();

searchParams is a JavaScript URLSearchParams object. There is a get method on URLSearchParams, which can be used to get the value of a search parameter. The following example gets the value of a search parameter called type:

const type = searchParams.get('type');

setSearchParams is a function used to set search parameter values...