How to Use Query Parameters With React Router?

Query parameters are a key-value pair added to the end of a URL to provide additional information to the server. They are often used to filter or sort data, pass search terms, or provide pagination information. Query params are typically separated from the rest of the URL by a question mark (?), and multiple parameters are separated by an ampersand (&).

React Router is a popular library for handling client-side routing in React applications. Query params are an essential feature of React Router as they allow developers to pass data between different routes and components. By using query params, developers can create more dynamic and flexible applications that can respond to user input in real-time.

In this article, we will explore how to use query parameters in React Router. We will start by explaining what query params are and how they differ from route parameters. Then we will show you how to set up React Router and implement query params in your application. We will also cover best practices for using query parameters in React Router and provide examples of how to use them for filtering and pagination. By the end of this article, you will have a solid understanding of how to use query params in React Router and be able to apply this knowledge to your own projects.

Understanding Query Parameters

Query parameters are used to pass data to the server and are added to the end of a URL. They are separated from the rest of the URL by a question mark (?), and multiple parameters are separated by an ampersand (&). The syntax of a query parameter is as follows:

http://example.com/path?param1=value1&param2=value2

In the above example, param1 and param2 are the names of the parameters, and value1 and value2 are their respective values.

Query parameters provide a convenient way to pass data between different components and routes in a React application. They allow developers to create dynamic and flexible applications that can respond to user input in real-time. They can be used for filtering or sorting data, passing search terms, or providing pagination information.

Differences between Query Params and Route Params

While both query params and route parameters are used to pass data between components and routes, they have different use cases. Here is a table summarizing the differences between query parameters and route parameters:

While both types of parameters can be useful in passing data between components and routes, it’s important to choose the right type of parameter depending on your use case.

What is React Router?

React Router is a popular library used to manage routing and URLs in React applications. It allows developers to handle client-side routing and navigate between different views or components of an application without the need for a page refresh. React Router provides a declarative approach to routing, meaning that developers can define the routes in a declarative manner using JSX.

React Router is built on top of the HTML5 history API, which allows developers to manipulate the browser history and the URL without the need for a server-side roundtrip. React Router provides several components that developers can use to create different types of routes, including the BrowserRouter, HashRouter, MemoryRouter, and StaticRouter.

The BrowserRouter is the most commonly used router, and it uses the HTML5 history API to handle client-side routing. The HashRouter is an alternative router that uses the hash portion of the URL to handle client-side routing. The MemoryRouter is a router that stores the routing information in memory, and it is useful for testing and other scenarios where the URL should not be visible to the user. The StaticRouter is a router that is used for server-side rendering, where the routing information is passed as props to the component.

React Router provides several components that developers can use to define the routes in their application, including the Route, Switch, Redirect, and NavLink components. The Route component is used to define a route and the corresponding component that should be rendered when the route is matched. The Switch component is used to render only the first matching route. The Redirect component is used to redirect the user to a different route. The NavLink component is used to create a link to a specific route, and it adds the active class to the link when the route is active.

Setting up React Router

Before we can start using query parameters in React Router, we need to set it up in our application. Here’s how you can set up React Router:

A. Installation

First, we need to install the React Router library. We can install React Router using either npm or yarn. Open a terminal in your project’s root directory and type the following command to install React Router:

npm install react-router-dom
or
yarn add react-router-dom

B. Configuring React Router

Once React Router is installed, we need to configure it in our application. In our main App.js file, we can wrap our application with the BrowserRouter component. This component provides the routing functionality to our application by managing the browser history.

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* Your components here */}
    </BrowserRouter>
  );
}
export default App;

Now that we’ve set up React Router, we can start using query parameters in our application. In the next section, we’ll explore how to implement query params in React Router.

Implementing Query Parameters in React Router

React Router v6 provides two hooks that can be used to work with query params: useSearchParams and useLocation. In this section, we will go through the process of adding, reading, updating, and removing query parameters using these hooks.

A. Using the useSearchParams Hook

The useSearchParams hook is used to get and set query params. It returns an array containing a SearchParams object and a function to update the query params. Here’s an example:

import { useSearchParams } from 'react-router-dom';

function MyComponent() {
  const [searchParams, setSearchParams] = useSearchParams();

  // Get a specific query parameter
  const myParam = searchParams.get('myParam');

  // Set a query parameter
  setSearchParams({ myParam: 'myValue' });

  // Remove a query parameter
  setSearchParams((params) => {
    params.delete('myParam');
    return params;
  });

  // ...
}

Note that setSearchParams can be called with an object to set or update query parameters, or with a function to update them based on the current value.

B. Adding Query Params to URLs

To add query params to a URL, we can use the Link component from React Router. Here’s an example:

import { Link } from 'react-router-dom';

function MyComponent() {
  return (
    <Link
      to={{
        pathname: '/my-route',
        search: '?myParam=myValue',
      }}
    >
      Go to My Route
    </Link>
  );
}

Note that the search property in the to object is used to add query parameters to the URL.

C. Reading

To read query parameters in a component, we can use the useLocation hook. It returns a Location object containing information about the current URL, including the query parameters. Here’s an example:

import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();

  // Get a specific query parameter
  const myParam = new URLSearchParams(location.search).get('myParam');

  // ...
}

Note that we use the URLSearchParams constructor to parse the query parameters from the search property of the location object.

D. Updating

To update query parameters in a component, we can use the useSearchParams hook. Here’s an example:

import { useSearchParams } from 'react-router-dom';

function MyComponent() {
  const [searchParams, setSearchParams] = useSearchParams();

  // Update a specific query parameter
  setSearchParams({ myParam: 'myNewValue' });

  // ...
}

E. Removing

To remove query parameters in a component, we can use the useSearchParams hook. Here’s an example:

import { useSearchParams } from 'react-router-dom';

function MyComponent() {
  const [searchParams, setSearchParams] = useSearchParams();

  // Remove a specific query parameter
  setSearchParams((params) => {
    params.delete('myParam');
    return params;
  });

  // ...
}

With these hooks, we can easily add, read, update, and remove query parameters in our React Router application. In the next section, we will look at how to use query parameters for filtering and pagination.

Handling Query Parameters with React Components

Query parameters can be accessed and manipulated within React components using the useLocation hook. This hook provides access to the current URL and query parameters.

A. Using the useLocation Hook

To use the useLocation hook, first import it from the react-router-dom package:

import { useLocation } from "react-router-dom";

Then, use the hook within your component to access the current location object:

function MyComponent() {
  const location = useLocation();

  // access location state, pathname, search, etc.
}

B. Accessing in Components

Once you have the location object, you can access the query parameters using the URLSearchParams API:

function MyComponent() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  // access query parameters
  const paramValue = queryParams.get("paramName");
}

C. Updating from Components

To update query parameters from within a component, you can use the URLSearchParams API to create a new URL search string and use navigate to update the URL:

import { useNavigate } from "react-router-dom";

function MyComponent() {
  const location = useLocation();
  const navigate = useNavigate();
  const queryParams = new URLSearchParams(location.search);

  function handleParamUpdate() {
    // update query parameters
    queryParams.set("paramName", "newValue");

    // create new search string and navigate to it
    const newSearch = `?${queryParams.toString()}`;
    navigate({ search: newSearch });
  }

  return (
    <button onClick={handleParamUpdate}>Update Query Parameter</button>
  );
}

Note that updating these parameters will trigger a re-render of the component, as the location object is part of the component’s state.

Next, we’ll look at how these parameters can be used for filtering and pagination.

Filtering and Pagination

One of the most common use cases for query parameters in web applications is filtering and pagination. Query parameters can be used to store filter criteria and page numbers, allowing users to navigate through large data sets more easily.

A. Implementing Filtering

To implement filtering with query parameters, you can use a form to collect filter criteria and update the query parameters accordingly:

import { useNavigate, useLocation } from "react-router-dom";

function FilterForm() {
  const location = useLocation();
  const navigate = useNavigate();
  const queryParams = new URLSearchParams(location.search);
  const [filterValue, setFilterValue] = useState(queryParams.get("filter"));

  function handleFilterUpdate(event) {
    event.preventDefault();

    // update query parameters with new filter value
    queryParams.set("filter", filterValue);
    navigate({ search: queryParams.toString() });
  }

  return (
    <form onSubmit={handleFilterUpdate}>
      <label>
        Filter:
        <input
          type="text"
          value={filterValue}
          onChange={(e) => setFilterValue(e.target.value)}
        />
      </label>
      <button type="submit">Apply Filter</button>
    </form>
  );
}

In this example, the form collects a filter value from the user and updates the filter query parameter when the form is submitted. The useLocation and useNavigate hooks are used to access and update the current location object.

B. Implementing Pagination

Pagination can also be implemented using query parameters. To do this, you can use a page query parameter to indicate the current page number:

import { useNavigate, useLocation } from "react-router-dom";

function PaginationControls() {
  const location = useLocation();
  const navigate = useNavigate();
  const queryParams = new URLSearchParams(location.search);
  const currentPage = Number(queryParams.get("page")) || 1;

  function handlePageChange(newPage) {
    // update query parameters with new page number
    queryParams.set("page", newPage);
    navigate({ search: queryParams.toString() });
  }

  return (
    <div>
      <button
        disabled={currentPage === 1}
        onClick={() => handlePageChange(currentPage - 1)}
      >
        Previous Page
      </button>
      <span>Page {currentPage}</span>
      <button onClick={() => handlePageChange(currentPage + 1)}>Next Page</button>
    </div>
  );
}

In this example, the currentPage variable is set based on the page query parameter. When the user clicks the “Previous Page” or “Next Page” buttons, the handlePageChange function updates the page query parameter and navigates to the new URL.

Query parameters can be a powerful tool for building flexible and dynamic user interfaces in React applications. However, it’s important to follow some best practices to ensure that query parameters are used effectively and safely. We’ll cover some best practices in the next section.

Best Practices:

When using query parameters in React Router, there are some best practices to keep in mind to ensure that your application remains efficient and maintainable.

• Avoid using query parameters for sensitive data: Query parameters are visible in the URL, so it is not recommended to use them for sensitive data such as passwords, credit card numbers, or personal information.
• Keep it simple and easy to understand: To avoid confusion and improve maintainability, keep the query parameters simple and easy to understand. Use clear and concise parameter names to make it easy to understand what the parameter does.
• Use React Router’s built-in methods: Instead of manually updating the URL, use React Router’s built-in methods like navigate and replace to manipulate query parameters. This will help to avoid errors and make your code cleaner and easier to maintain.
• Use clear and concise parameter names: Use clear and concise parameter names to make it easy to understand what the parameter does. Avoid using ambiguous or overly long parameter names.

• Use proper encoding for special characters and spaces: To prevent issues, make sure to use proper encoding for special characters and spaces in query parameter values.
• Consider using server-side rendering: Server-side rendering can improve SEO and avoid unnecessary client-side rendering of data.
• Test your application thoroughly: Test your application thoroughly to ensure that query parameters are working as expected in different scenarios.
• Document your query parameters: Document your query parameters in your API documentation to help other developers understand how to use them.
• Consider using URL fragments (#): For certain types of data, such as anchor links within a page, consider using URL fragments instead of query parameters. This can make your URLs cleaner and more user-friendly.

By following these best practices, you can ensure that your application remains efficient and maintainable when using query parameters in React Router.

Conclusion:

In conclusion, query parameters are a powerful tool for managing state in your React Router application. They allow you to pass data between pages and components, handle filtering and pagination, and more. In this article, we’ve covered how to set up React Router, implement query parameters, and handle them in React components.

We’ve also discussed best practices for working with query parameters, including avoiding sensitive data, using clear and concise parameter names, handling invalid parameters gracefully, and testing your application thoroughly.

By following these best practices and implementing query parameters effectively, you can create a more robust and maintainable React Router application. We hope that this guide has been helpful in understanding how to use query parameters in React Router.