¿Cómo obtener el valor del parámetro de la string de consulta en ReactJS?

Podemos acceder a la string de consulta a través de this.props.location.search y luego podemos analizarla usando una biblioteca llamada query-string . Esta biblioteca tiene una función parse() que analiza la string de consulta y devuelve un objeto.

 Por ejemplo, la string de consulta es ?site=gfg&subject=react luego, después de analizar el objeto será:

{
 Site:"gfg",
 Subject:"react"
}

Instalación del módulo: Instale la biblioteca con el siguiente comando:

npm install query-string 

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Nombre de archivo: App.js

import React, { Component } from "react";
// Importing Module
import queryString from 'query-string'
  
class App extends 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 App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

• Verá el siguiente botón y texto en la pantalla:

  

• Después de hacer clic en el botón, el siguiente será el resultado: