实际上，没有必要使用第三方库。我们可以用纯JavaScript。

考虑以下URL:

https://example.com?yourParamName=yourParamValue

现在我们得到:

const url = new URL(window.location.href);
const yourParamName = url.searchParams.get('yourParamName');

简而言之

const yourParamName = new URL(window.location.href).searchParams.get('yourParamName')

另一个智能解决方案(推荐)

const params = new URLSearchParams(window.location.search);
const yourParamName = params.get('yourParamName');

简而言之

const yourParamName = new URLSearchParams(window.location.search).get('yourParamName')

注意:

对于有多个值的参数，使用“getAll”而不是“get”

https：//example.com？yourParamName[]=yourParamValue1&yourParamName[]=yourParamValue2

const yourParamName = new URLSearchParams(window.location.search).getAll('yourParamName[]')

结果如下:

["yourParamValue1", "yourParamValue2"]

React路由器v6，使用钩子

在react-router-dom v6中，有一个名为useSearchParams的新钩子。所以,

const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("__firebase_request_key")

你会得到“blablabla”。注意，searchParams是URLSearchParams的一个实例，它也实现了一个迭代器，例如用于使用Object.fromEntries等。

React Router v4/v5，没有钩子，通用

React Router v4不再为你解析查询，但你只能通过this.props.location.search(或useLocation，见下文)访问它。原因见nbeuchat的答案。

例如，你可以用qs库导入qs

qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key

另一个库是query-string。有关解析搜索字符串的更多想法，请参阅这个答案。如果你不需要ie兼容性，你也可以使用

new URLSearchParams(this.props.location.search).get("__firebase_request_key")

对于功能组件，你可以用钩子useLocation替换this.props.location。注意，你可以使用window.location。搜索，但这将不允许在更改时触发React渲染。 如果你的(非功能性的)组件不是Switch的直接子组件，你需要使用throuter来访问路由器提供的任何道具。

React路由器v3

React Router已经为你解析了位置，并将它作为道具传递给你的RouteComponent。您可以访问查询(在?在url)部分通过

this.props.location.query.__firebase_request_key

如果你在路由器中寻找用冒号(:)分隔的路径参数值，这些可以通过

this.props.match.params.redirectParam

这适用于最新的React Router v3版本(不确定是哪个)。旧版本的路由器报告使用this.props.params.redirectParam。

一般

尼扎姆。Sp的建议

console.log(this.props)

无论如何都会有帮助的。

有了这一行代码，你可以在React Hook和React Class Component的任何地方使用它。

https://www.hunterisgod.com/?city=Leipzig

let city = (new URLSearchParams(window.location.search)).get("city")

据我所知，有三种方法可以做到。

1.使用正则表达式获取查询字符串。

2.您可以使用浏览器api。 图片当前的url是这样的:

http://www.google.com.au?token=123

我们只想得到123;

第一个

 const query = new URLSearchParams(this.props.location.search);

Then

const token = query.get('token')
console.log(token)//123

使用第三个名为“query-string”的库。 首先安装它 NPM I查询字符串 然后导入到当前的javascript文件中: 导入query-string

下一步是在当前url中获取'token'，请执行以下操作:

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

2019年2月25日更新

4. 如果当前url如下所示:

http://www.google.com.au?app=home&act=article&aid=160990

我们定义一个函数来获取参数:

function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}

我们可以通过以下方式获得“援助”:

getQueryVariable('aid') //160990

当使用React钩子时，没有访问this.props.location的权限。 要获取url参数，请使用窗口对象。

const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get('bar');

http://localhost:8000/#/signin?id=12345

import React from "react";
import { useLocation } from "react-router-dom";

const MyComponent = () => {
  const search = useLocation().search;
const id=new URLSearchParams(search).get("id");
console.log(id);//12345
}