How to Use Query Parameters in React Router?

Utilize query parameters effectively in React Router to enhance navigation and dynamically manage content in your React applications. In this guide, we will explore the seamless integration of query parameters within React Router. Learn how to efficiently pass and retrieve query parameters in both React Router v5 and the latest version, React Router v6.

What is a Query Parameter?

Query parameters are elements appended to a URL to convey information in an HTTP request. Typically used in GET requests, they follow the "?" in a URL and are separated by "&" if multiple. Commonly in key-value pairs like "?name=John&age=25," they support multiple values, empty flags, URL encoding, arrays, nested structures, pagination controls (e.g., "?page=2&perPage=10"), and timestamp representation (e.g., "?timestamp=1633123456"). Their usage varies with application, API, or framework design.

What is a React Router?

React Router is a popular library for handling navigation and routing in React applications. It enables the creation of a single-page web application with dynamic, client-side routing. React Router provides a set of components that allows developers to define routes, linking them to specific components in the application. It helps manage the UI state and ensures that the user interface corresponds to the URL's displayed content. With React Router, developers can create seamless, responsive navigation experiences in React-based web applications.

How to Use and Pass Query Parameters in React Router?

In React Router, you can pass query parameters using the useHistory hook or the withRouter higher-order component. The following examples demonstrate how to pass and retrieve query parameters in a React component using React Router.

Passing Query Parameters in React Router v5:

In React Router v5, you can use the useHistory hook to navigate and pass query parameters:

import React from 'react';
import { useHistory } from 'react-router-dom';

const MyComponent = () => {const history = useHistory();
const handleClick = () => {// Pass query parameters
    history.push('/path?param1=value1&param2=value2');
  };
return (<div<button onClick={handleClick}Navigate with Query Parameters</button</div
  );
};

export default MyComponent;

Retrieving Query Parameters:

You can use the useLocation hook to retrieve query parameters:

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const MyComponent = () => {const location = useLocation();
useEffect(() => {// Retrieve query parametersconst params = new URLSearchParams(location.search);const param1 = params.get('param1');const param2 = params.get('param2');
    console.log('param1:', param1);console.log('param2:', param2);
  }, [location.search]);
return (<div
      {/* Render component content */}</div
  );
};

export default MyComponent;

Passing Query Parameters in React Router v6

In React Router v6, you use the useNavigate hook to navigate and pass query parameters:

import React from 'react';
import { useNavigate } from 'react-router-dom';

const MyComponent = () => {const navigate = useNavigate();
const handleClick = () => {// Pass query parametersnavigate('/path?param1=value1&param2=value2');
  };
return (<div<button onClick={handleClick}Navigate with Query Parameters</button</div
  );
};

export default MyComponent;

Retrieving Query Parameters:

You can use the useSearchParams hook to retrieve query parameters in React Router v6:

import React, { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

const MyComponent = () => {const [searchParams] = useSearchParams();
useEffect(() => {// Retrieve query parametersconst param1 = searchParams.get('param1');const param2 = searchParams.get('param2');
    console.log('param1:', param1);console.log('param2:', param2);
  }, [searchParams]);
return (<div
      {/* Render component content */}</div
  );
};

export default MyComponent;

Conclusion

In conclusion, mastering the effective utilization of query parameters in React Router is crucial for enhancing navigation and dynamically managing content in React applications. This guide has provided insights into the seamless integration of query parameters within React Router, offering a comprehensive understanding of their usage in both React Router v5 and v6. By learning how to efficiently pass and retrieve query parameters, developers can optimize the handling of dynamic content and create responsive navigation experiences in their React-based web applications.