Query parameters appear in URLs beginning with a question mark (?
) and are followed by a parameter name assigned to a value. They are optional and are most often used to search, sort and/or filter resources.
For example, if you were to visit the URL below…
https://www.google.com/search?q=codecademy
… you would be taken to Google’s /search
page displaying results for the search term codecademy
. In this example, the name of the query parameter is q
.
React Router provides a mechanism for grabbing the values of query parameters: the useLocation()
hook. When called, useLocation()
returns a location
object with a search
property that is often directly extracted with destructuring syntax. This search
value corresponds to the current URL’s query string.
Consider this example of a SortedList
component:
import { useLocation } from 'react-router-dom' // Rendered when a user visits "/list?order=DESC" export const SortedList = (numberList) => { const { search } = useLocation(); console.log(search); // Prints "?order=DESC" };
While we could parse this search
string on our own to get the query parameter value ('DESC'
), the native URLSearchParams
constructor is often used to do this for us:
import { useLocation } from 'react-router-dom' // Rendered when a user visits "/list?order=DESC" export const SortedList = (numberList) => { const { search } = useLocation(); const queryParams = new URLSearchParams(search); const order = queryParams.get('order'); console.log(order); // Prints 'DESC' };
Let’s break down this example:
- First, we import
useLocation()
and call it withinSortedList
to get thesearch
query parameter string'?order=DESC'
- Next, we pass the
search
string into thenew URLSearchParams()
constructor which returns an object, often calledqueryParams
. This object has a.get()
method for retrieving query parameter values. - Finally, to get the value of a specific query parameter, we pass in the name of the query parameter whose value we want to obtain as a string (
'order'
) to thequeryParams.get()
method. The value ('DESC'
) is then stored in the variableorder
.
Let’s expand the SortedList
example so that the component uses the order
value to render a list of data either in ascending order, in descending order, or in its natural order.
import { useLocation } from 'react-router-dom' // Rendered when a user visits "/list?order=DESC" export const SortedList = (numberList) => { const { search } = useLocation(); const queryParams = new URLSearchParams(search); const sortOrder = queryParams.get('order'); if (sortOrder === 'ASC') { // render the numberList in ascending order } else if (sortOrder === 'DESC') { // render the numberList in descending order } else { // render the numberList as is } }
Now, if the user were to visit /list?order=DESC
, the value 'DESC'
would be extracted and we can render the SortedList
component in descending order. Likewise, visiting /list?order=ASC
will render the list in ascending order. Finally, since query parameters are optional, if we were to visit /list
, the SortedList
component would render in its natural order.
Instructions
Task 1
You’re going to add a search feature to the Articles
page that filters the listed articles by whether or not their titles match the search string. For example, if the path is /articles?title=react
, only the articles with 'react'
in the title should be displayed.
Navigate to Articles.js and import useLocation
from react-router-dom
.
Hint
Import useLocation
from react-router-dom
.
Task 2
Next, inside the Articles
component, call useLocation
to get access to the current URL’s query string (accessible via the location object’s search
property) and store it in a variable called search
.
Hint
Often, the search
value is extracted from useLocation()
using destructuring assignment, like so:
const { search } = useLocation();
Task 3
Pass the search string to the URLSearchParams()
constructor to get the queryParams
value.
Hint
You do not need to import URLSearchParams
. Your code should look like this:
const queryParams = new URLSearchParams(search);
Task 4
Finally, you should see a variable named title
declared and assigned to the empty string value ''
. Replace this hard-coded ''
value with queryParams.get()
, passing in the name of the query parameter whose value we would like to extract.
Verify your code works by navigating to /articles?title=browser
and ensuring that only articles with “browser” in the title show up on the page.
Hint
The query parameter we want to extract is called ?title
so your code should look like this:
const title = queryParams.get('title');