How to Get Parameter Value From Query String in React JS

How to Get Parameter Value From Query String in React JS

React url parameter without router. This tutorial will explain to you in detail how to get parameters value from in URL without using react-router in react js app.

Sometimes, you work in react js app and want to get query string parameters in URL in react js app using this.props.location.search.

So, this example tutorial will create a simple home page with query string url and get parameter value from it using this.props.location.search in react js app.

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

React url parameter without router. in this tutorial, you have learned how to get parameters value from in URL without using react-router in react js app.

Recommended React Post

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *