React | How to get parameter value from query string?

Hello Friends,

In react js get request method how to get query string. Get query string after question in react js then follow this tutorial. In this demo you can get quick guide about query string parameters. One of the easiest way to get query strings with react router is ‘query-string’ Package.

Using ‘query-string’ package get query string parameter in any component. get parameter in component render method and all other method. first install this package and then follow this example.

Install ‘query-string’ Package

npm install query-string

/src/CategoryComponent.js

This is example URL :

http://localhost:3000/category?id=1&type=cornPizza

import React from 'react'
import queryString from 'query-string';
class CategoryComponent extends React.Component{
    render(){
        console.log(location.search);
        // Output: '?id=1&type=cornPizza'
        const parsed = queryString.parse(location.search);
        console.log(parsed);
        // Output: {id: "1", type: "cornPizza"}
        console.log(location.hash);
        // Output: '#id=1&type=cornPizza'
        return(
            <div>
                <h4>This is Category Component.</h4>
            </div>
        )
    }

    
}
export default CategoryComponent;