reactjsHow can I use query parameters in a React.js application?

Query parameters are a way to pass additional information to a React.js application. They can be used to provide dynamic data to the application, such as user preferences or an API key.

Here is an example of how to use query parameters in a React.js application:

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

function App() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const apiKey = queryParams.get('apiKey');

  // use apiKey to access an API
  ...
}

In this example, the useLocation hook is used to get the current URL, and then URLSearchParams is used to parse the query parameters from the URL. The get method is then used to access the apiKey parameter from the query string. The apiKey can then be used to access an API.

Code explanation

• useLocation: This is a React Router hook that is used to get the current URL.
• URLSearchParams: This is a built-in JavaScript class that is used to parse the query parameters from a URL.
• get: This is a method on the URLSearchParams class that is used to access the value of a query parameter.

Helpful links

• React Router Documentation
• URLSearchParams Documentation

Edit this code on GitHub