Reactjs 是否从查询字符串中获取参数值？

我试图从URL获取查询字符串，但得到一个错误。我正在使用一个使用Shopify CLI创建的reactjs项目。我试过这些例子

TypeError:无法读取未定义的属性“params”

import React，{Component}来自“React”；
类用户扩展组件{
render（）{
const{id}=this.props.match.params；
返回(
用户id为{id}
);
}  
}
导出默认用户；

您需要安装查询字符串包

npm安装查询字符串

 import queryString from 'query-string';

    console.log(location.search);
    // Output: '?id=1&name=abc'

    const parsed = queryString.parse(location.search);
    console.log(parsed);
    // Output: {id: "1", name: "abc"}

    console.log(location.hash);
    // Output: '#id=1&name=abc'

对于不同的方法，您可以查看：

此外，正如错误所示，

props

未定义。如果您已经在解析并从父组件获取props中的值，请尝试记录props值。否则可以直接使用查询字符串

const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123
   

试试这个：

function getUrlVars() {

   let vars = {};
   let parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
   });

   return vars;
}

使用它：

let number = getUrlVars()["x"];
let mytext = getUrlVars()["text"];

资料来源：

let number = getUrlVars()["x"];
let mytext = getUrlVars()["text"];