Get the Query Parameters in React
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
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. ?
Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***

Comments (0)