如何从 ReactJS 中的查询字符串中获取参数值？

我们可以通过this.props.location.search访问查询字符串，然后我们可以使用一个名为query-string的库来解析它。这个库有一个解析查询字符串并返回一个对象的 parse()函数。

例如，查询字符串是?site=gfg&subject=react那么解析后的对象将是：

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

模块安装：使用以下命令安装库：

npm install query-string 

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

文件名：App.js

Javascript

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 (
      

          
 WebSite: {this.state.site} 
  
          
 Subject: {this.state.subject} 
  
        
          click me 
      
    );
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

• 您将在屏幕上看到以下按钮和文本：

  

• 点击按钮后，输出如下：