Learn

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 within SortedList to get the search query parameter string '?order=DESC'
  • Next, we the search string into the new URLSearchParams() constructor which returns an object, often called queryParams. 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 the queryParams.get() method. The value ('DESC') is then stored in the variable order.

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');

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?