React Router - Query Parameters

Query Parameters
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:

1. First, we import useLocation() and call it within SortedList to get the search query parameter string '?order=DESC'
2. Next, we pass 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.
3. 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.