The query parameters is indicated by the first ? in a URI. In this article, I’m going to share how to get the query params in React. Let’s get started:

Table of Contents

1. React Router v5
2. React Router v4
3. Class-based Component

React Router v5

 In react-router v5, we can get the query parameter using useLocation hook. We need to import BrowserRouter from react-router-dom package.

Install react-router-dom if not installed:

npm i react-router-dom

Open index.js and import BrowserRouter.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

/* import BrowserRouter */
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

Open App.js and paste this code:

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

function App() {
  const search = useLocation().search;
  const product_id = new URLSearchParams(search).get('product_id');
  const category_id = new URLSearchParams(search).get('category_id');

  return (
    <div>
      <p>Product ID: {product_id}</p>
      <p>Category ID: {category_id}</p>
    </div>
  );
}

export default App;

Now visit this route and see the output:

http://localhost:3000?product_id=102&category_id=10

React Router v4

Using props.location.search property, we can get params in react router 4. Let’s see an exmaple:

import React from 'react';

export default function Product(props) {

  const search = props.location.search;
  const product_id = new URLSearchParams(search).get('product_id');

  return (
    <div>
      <p>Product ID: {name}</p>
    </div>
  );
}

Class-based Component

In class-based components, you can get params it like this:

import React, { Component } from "react";

class Product extends Component {

  render() {
    const search = this.props.location.search;
    const product_id = new URLSearchParams(search).get("product_id");

    return (
      <div>
      <p>Product ID: {product_id}</p>
      </div>
    );
  }
}

export default Product;

That’s it. Thanks for reading.