从查询字符串中获取参数值？答案

【问题标题】：Get parameter value from query string?从查询字符串中获取参数值？
【发布时间】：2021-04-14 17:10:56
【问题描述】：

我尝试从 URL 获取查询字符串，但出现错误。我正在使用使用 Shopify-CLI 创建的 reactjs 项目。我已经尝试过的例子 https://ui.dev/react-router-v4-query-strings/ https://ui.dev/react-router-v5-query-strings/

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

import React, { Component } from "react";

class Users extends Component {
  render() {
const { id } = this.props.match.params;

return (
  <div>
    <h1>User id is {id}</h1>
  </div>
);
}  
}

export default Users;

【问题讨论】：

标签： reactjs shopify react-router-dom

【解决方案1】：

需要安装查询字符串包npm install query-string

 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'

对于不同的方法，您可以查看：React - How to get parameter value from query string?

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

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

【讨论】：

【解决方案2】：

试试这个：

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"];

来源：https://html-online.com/articles/get-url-parameters-javascript/

【讨论】：