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.
Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.