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

Question

如何在routes.jsx文件中定义路由,以便__firebase_request_key从服务器重定向后从Twitter的单点登录进程生成的URL中捕获参数值？

http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla

我尝试使用以下路由配置,但是:redirectParam没有捕获所提到的参数:

<Router>
  <Route path="/" component={Main}>
    <Route path="signin" component={SignIn}>
      <Route path=":redirectParam" component={TwitterSsoButton} />
    </Route>
  </Route>
</Router>

Answer 1

反应路由器v3

React Router已经为您解析了该位置,并将其作为道具传递给您的RouteComponent.您可以访问查询(在网址中的？之后)部分

this.props.location.query.__firebase_request_key

如果您正在寻找路径参数值,在路由器内部用冒号(:)分隔,可以通过这些访问

this.props.match.params.redirectParam

这适用于后期React Router v3版本(不确定哪个版本).据报道旧的路由器版本使用this.props.params.redirectParam.

反应路由器v4

React Router v4不再为您解析查询,但您只能通过它访问它this.props.location.search.有理由看nbeuchat的回答.

例如,您可以执行导入的查询字符串库qs

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

此外,如果您的组件不是a的直接子组件,则Switch需要使用withRouter访问任何路由器提供的道具.

一般

nizam.sp的建议

console.log(this.props)

在任何情况下都会有所帮助.

Answer 2

反应路由器v4

运用 component

<Route path="/users/:id" component={UserPage}/> 

this.props.match.params.id

使用路径道具自动渲染组件.

运用 render

<Route path="/users/:id" render={(props) => <UserPage {...props} />}/> 

this.props.match.params.id

路径道具传递给渲染功能.

Answer 3

反应路由器v4

使用React Router v4,this.props.location.search它不再存在.您需要使用let params = queryString.parse(this.props.location.search)而不是自己解析查询参数或使用现有的包来解析查询参数{ qs1 : 'naisarg', qs2 : 'parmar'}.

例

这是使用React Router v4和this.props.location.query库的最小示例.

import { withRouter } from 'react-router-dom';
import queryString from 'query-string';

class ActivateAccount extends Component{
    someFunction(){
        let params = queryString.parse(this.props.location.search)
        ...
    }
    ...
}
export default withRouter(ActivateAccount);

合理的

React Router的团队合理删除this.props.location.search属性是:

有许多流行的包对查询字符串解析/字符串化略有不同,并且这些差异中的每一个对于某些用户可能是"正确的"方式而对于其他用户可能是"不正确的".如果React Router选择了"正确的",它只适合某些人.然后,它需要为其他用户添加一种替代其首选查询解析包的方法.React Router没有内部使用搜索字符串来要求它解析键值对,所以它不需要选择其中哪一个应该是"正确的".

[...]

4.0采用的方法是去除所有"包含电池"的功能,并回到基本路由.如果您需要查询字符串解析或异步加载或Redux集成或其他非常具体的内容,那么您可以使用专门针对您的用例的库添加它.您不需要的东西很少,您可以根据自己的喜好和需求定制东西.

你可以在GitHub上找到完整的讨论.

Answer 4

使用 React 钩子时，无法访问this.props.location. 要捕获 url 参数，请使用windowobject。

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

Answer 5

React Router v4不再具有该 props.location.query 对象(参见github讨论).因此,接受的答案不适用于较新的项目.

v4的解决方案是使用外部库查询字符串来解析props.location.search

const qs = require('query-string');
//or
import * as qs from 'query-string';

console.log(location.search);
//=> '?foo=bar'

const parsed = qs.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}

Answer 6

反应路由器 5.1+

5.1推出各种钩子状useLocation，并useParams可能是使用在这里。

例子：

<Route path="/test/:slug" component={Dashboard} />

那么如果我们访问了说

http://localhost:3000/test/signin?_k=v9ifuf&__firebase_request_key=blablabla

你可以像这样检索它

import { useLocation } from 'react-router';
import queryString from 'query-string';

const Dashboard: React.FC = React.memo((props) => {
    const location = useLocation();

    console.log(queryString.parse(location.search));

    // {__firebase_request_key: "blablabla", _k: "v9ifuf"}

    ...

    return <p>Example</p>;
}

Answer 7

据我所知,有三种方法可以做到.

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

2.您可以使用浏览器API.image当前网址是这样的:

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

我们只想得到123;

第一

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

然后

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

3.使用名为'query-string'的第三个库.首先安装它

npm i query-string

然后将其导入当前的javascript文件:

 import queryString from 'query-string'

下一步是在当前网址中获取"令牌",请执行以下操作:

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

希望能帮助到你.

更新于25/02/2019

4. 如果当前网址如下所示:

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

Answer 8

使用这种单行代码，您可以在 React Hook 和 React Class Component 中的任何地方使用纯 JavaScript 使用它。

https://www.hunterisgod.com/?city=莱比锡

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

Answer 9

您可以检查 react-router,简单来说,只要您在路由器中定义,就可以使用代码获取查询参数:

this.props.params.userId

Answer 10

反应路由器v4

const urlParams = new URLSearchParams(this.props.location.search)
const key = urlParams.get('__firebase_request_key')

请注意,它目前是实验性的.

在此处检查浏览器兼容性:https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

Answer 11

如果您的路由器是这样的

<Route exact path="/category/:id" component={ProductList}/>

你会得到这样的id

this.props.match.params.id

Answer 12

说有一个网址如下

http://localhost:3000/callback?code=6c3c9b39-de2f-3bf4-a542-3e77a64d3341

如果我们想从该 URL 中提取代码，下面的方法将起作用。

const authResult = new URLSearchParams(window.location.search); 
const code = authResult.get('code')

Answer 13

不是反应方式，但我相信这个单行功能可以帮助你:)

const getQueryParams = () => window.location.search.replace('?', '').split('&').reduce((r,e) => (r[e.split('=')[0]] = decodeURIComponent(e.split('=')[1]), r), {});

示例：
URL：  ...?a=1&b=c&d=test
代码：  

>  getQueryParams()
<  {
     a: "1",
     b: "c",
     d: "test"
   }

Answer 14

尝试这个

ReactJS

http://localhost:4000/#/amoos?id=101

// ReactJS
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); //101
}

// VanillsJS
const url = "http://localhost:4000/#/amoos?id=101"  // We can use 'window.location'

function getQuery(url, q) {
   return (url.match(new RegExp('[?&]' + q + '=([^&]+)')) || [, null])[1];
}

console.log(getQuery(url, "id"))

Answer 15

无需第 3 方库或复杂的解决方案即可在一行中完成所有操作。这是如何

let myVariable = new URLSearchParams(history.location.search).get('business');

您唯一需要更改的是带有您自己的参数名称的“业务”一词。

示例 url.com?business=hello

myVariable 的结果将是 hello

Answer 16

React Router v5.1引入了钩子：

为了

<Route path="/posts/:id">
  <BlogPost />
</Route>

您可以使用钩子访问 params / id ：

const { id } = useParams();

更多在这里。

Answer 17

function useQueryParams() {
    const params = new URLSearchParams(
      window ? window.location.search : {}
    );

    return new Proxy(params, {
        get(target, prop) {
            return target.get(prop)
        },
    });
}

React hooks 很棒

如果您的网址看起来像/users?page=2&count=10&fields=name,email,phone

const { page, fields, count } = useQueryParams();

console.log(params)

Answer 18

您可以使用以下反应钩子：

1. 如果 url 发生变化，钩子状态就会更新
2. SSR: typeof window === "undefined"，只是检查window导致错误（尝试一下）
3. Proxy对象隐藏实现，因此undefined返回而不是null

这是将搜索参数作为对象获取的函数：

const getSearchParams = <T extends object>(): Partial<T> => {
    // server side rendering
    if (typeof window === "undefined") {
        return {}
    }

    const params = new URLSearchParams(window.location.search) 

    return new Proxy(params, {
        get(target, prop, receiver) {
            return target.get(prop as string) || undefined
        },
    }) as T
}

然后像这样使用它作为钩子：

const useSearchParams = <T extends object = any>(): Partial<T> => {
    const [searchParams, setSearchParams] = useState(getSearchParams())

    useEffect(() => {
        setSearchParams(getSearchParams())
    }, [typeof window === "undefined" ? "once" : window.location.search])

    return searchParams
}

如果您的网址如下所示：

/app?page=2&count=10

你可以这样读：

const { page, count } = useQueryParams();

console.log(page, count)

Answer 19

反应路由器 v6

\n

来源：在 React Router 中获取查询字符串（搜索参数）

\n

使用新的useSearchParams钩子和.get()方法：

\n

const Users = () => {\n  const [searchParams] = useSearchParams();\n  console.log(searchParams.get(\'sort\')); // \'name\'\n\n  return <div>Users</div>;\n};\n

\n

通过这种方法，您可以读取一个或几个参数。

\n

BONUS 将参数作为对象获取：

\n

如果您需要一次获取所有查询字符串参数，那么我们可以Object.fromEntries这样使用：

\n

const Users = () => {\n  const [searchParams] = useSearchParams();\n  console.log(Object.fromEntries([...searchParams])); // \xe2\x96\xb6 { sort: \'name\', order: \'asecnding\' }\n  return <div>Users</div>;\n};\n

\n

阅读更多内容和现场演示：在 React Router 中获取查询字符串（搜索参数）

\n

Answer 20

React router从v4开始,不再query params直接在其location对象中提供.原因是

有许多流行的包对查询字符串解析/字符串化略有不同,并且这些差异中的每一个对于某些用户可能是"正确的"方式而对于其他用户可能是"不正确的".如果React Router选择了"正确的",它只适合某些人.然后,它需要为其他用户添加一种替代其首选查询解析包的方法.React Router没有内部使用搜索字符串来要求它解析键值对,所以它不需要选择其中哪一个应该是"正确的".

包含它之后,只需在您的视图组件中解析期望查询对象的location.search就更有意义了.

你可以通过覆盖withRouterfrom react-routerlike 来做到这一点

customWithRouter.js

import { compose, withPropsOnChange } from 'recompose';
import { withRouter } from 'react-router';
import queryString from 'query-string';

const propsWithQuery = withPropsOnChange(
    ['location', 'match'],
    ({ location, match }) => {
        return {
            location: {
                ...location,
                query: queryString.parse(location.search)
            },
            match
        };
    }
);

export default compose(withRouter, propsWithQuery)

Answer 21

也许有点晚了，但是这个 react hook 可以帮助您在 URL 查询中获取/设置值：https : //github.com/rudyhuynh/use-url-search-params（由我编写）。

无论有没有react-router. 以下是您的案例中的代码示例：

import React from "react";
import { useUrlSearchParams } from "use-url-search-params";

const MyComponent = () => {
  const [params, setParams] = useUrlSearchParams()
  return (
    <div>
      __firebase_request_key: {params.__firebase_request_key}
    </div>
  )
}

Answer 22

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
}

Answer 23

如果你没有得到this.props...你期望基于其他答案,你可能需要使用withRouter(docs v4):

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux terminology) to the router.  
const TwitterSsoButton = withRouter(ShowTheLocation)  

// This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))

// This does not
connect(...)(withRouter(MyComponent))

Answer 24

this.props.params.your_param_name 将工作.

这是从查询字符串中获取参数的方法.
请尽力console.log(this.props);探索所有可能性.

Answer 25

componentDidMount(){
    //http://localhost:3000/service/anas
    //<Route path="/service/:serviceName" component={Service} />
    const {params} =this.props.match;
    this.setState({ 
        title: params.serviceName ,
        content: data.Content
    })
}

Answer 26

我很难解决这个问题.如果没有上述工作,您可以尝试这样做.我正在使用create-react-app

要求

react-router-dom":"^ 4.3.1"

解

在指定路由器的位置

<Route path="some/path" ..../>

像这样添加您想要传入的参数名称

<Route path="some/path/:id" .../>

在您渲染某些/ path的页面上,您可以指定此参数来查看参数名称调用ID,如下所示

componentDidMount(){
  console.log(this.props);
  console.log(this.props.match.params.id);
}

在您导出默认值的末尾

export default withRouter(Component);

请记住包含导入

import { withRouter } from 'react-router-dom'

当console.log(this.props)你将能够传递下来的东西.玩得开心!

Answer 27

您可以创建简单的钩子来从当前位置提取搜索参数：

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

export function useSearchParams<ParamNames extends string[]>(...parameterNames: ParamNames): Record<ParamNames[number], string | null> {
    const { search } = useLocation();
    return React.useMemo(() => { // recalculate only when 'search' or arguments changed
        const searchParams = new URLSearchParams(search);
        return parameterNames.reduce((accumulator, parameterName: ParamNames[number]) => {
            accumulator[ parameterName ] = searchParams.get(parameterName);
            return accumulator;
        }, {} as Record<ParamNames[number], string | null>);
    }, [ search, parameterNames.join(',') ]); // join for sake of reducing array of strings to simple, comparable string
}

那么你可以像这样在你的功能组件中使用它：

// current url: http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
const { __firebase_request_key } = useSearchParams('__firebase_request_key');

// current url: http://localhost:3000/home?b=value
const searchParams = useSearchParameters('a', 'b'); // {a: null, b: 'value'}

Answer 28

也许有人可以帮助澄清原因，但如果您尝试点击 props 从 App.js 页面上全新安装的 Create React App 中查找位置，您会得到：

类型错误：无法读取未定义的属性“搜索”

即使我有 App.js 作为主路由：

<Route exact path='/' render={props => (

仅在 App.js 上，使用 window.location 对我有用：

import queryString from 'query-string';
...
const queryStringParams = queryString.parse(window.location.search);

Answer 29

实际上没有必要使用 3rd 方库。我们可以用纯 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"]