How to Get Parameter Value From Query String in React JS

To extract query string parameters from a URL. In this tutorial, you will learn how to get parameter value from query string in React JS.

A query string is a part of a URL that contains additional information about the resource being requested. Query strings start with a question mark (?) followed by a list of key-value pairs separated by ampersands (&).

For example, consider the following URL:

https://example.com/search?q=react+js&page=1

In this URL, the query string is “q=react+js&page=1”. It contains two key-value pairs: “q=react+js” and “page=1”. The key “q” has a value of “react+js”, and the key “page” has a value of “1”.

How to Get Parameter Value From Query String in React JS

To follow the following steps and to get url parameter values without react router in react js app:

• Step 1 – Create React App
• Step 2 – Install Query String and Bootstrap 4 Package
• Step 3 – Create Home Component
• Step 4 – Add Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Query String and Bootstrap 4 Package

In this step, execute the following commands to install query string and boostrap 4 library into your react app:

npm install bootstrap --save
npm install query-string 

Then, Add react router and bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <h2>How to Get Parameter in URL in React js with Router</h2>
    </div>
  );
}

export default App;

Step 3 – Create Home Component

In this step, visit the src directory of your react js app and create home component named Home.js. And add the following code into it:

import React from 'react'
import queryString from 'query-string'

class Home extends React.Component{

state = {
    site: 'unknown',
    subject: 'i dont know'
  }
  
  handleQueryString = () => {
    // Parsing the query string 
    // Using parse method
    let queries = queryString.parse(this.props.location.search)
    console.log(queries)
    this.setState(queries)
  }
  
  render() {
    return (
      <div style={{ margin: 200 }}>
          
      <p> WebSite: {this.state.site} </p>
  
          
      <p> Subject: {this.state.subject} </p>
  
        <button
          onClick={this.handleQueryString}
          className='btn btn-primary'>
          click me </button>
      </div>
    );
  }
}
  
export default Home;

Let’s assume you have the following URL “http://localhost:3000/?site=tutsmake&subject=get-query-string” that can be displayed into react js application. So, when you clicking on the button, you will get query string parameter on your react js app page.

Step 4 – Add Component in App.js

In this step, you need to add Home.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
iimport queryString from 'query-string'
import Home from './Home'

function App() {  
    
  return (  
    <div className="App">  
      <Home />  
    </div>  
  );  
}  

export default App;

Conclusion

In this article, you have learned how to get parameter value from query string in React JS using the built-in “URLSearchParams” API. We have also discussed how to handle invalid query string parameters in our code. By following these steps, we can easily extract and use query string parameters in our React JS applications.

Recommended React Post