blocks|key|4434993|text|当使用React钩子时，无法访问this.props.location。要捕获url参数，请使用window对象。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4434994|const+search+=+window.location.search;
const+params+=+new+URLSearchParams(search);
const+foo+=+params.get('bar');|code-block|syntax|javascript|4434995|entityMap^0|G|J|1C|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>When using React hooks there is no access to access to <code>this.props.location</code>.
To capture url parameters use <code>window</code> object.</p>

<pre class="lang-js prettyprint-override"><code>const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get('bar');
</code></pre>


blocks|key|4435329|text|有了这一行代码，你就可以在React+Hook和React+Class+Component中的任何地方通过纯JavaScript使用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435330|https://www.hunterisgod.com/?city=Leipzig|offset|length|4435331|let+city+=+(new+URLSearchParams(window.location.search)).get("city")|code-block|syntax|javascript|4435332|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|15|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>With this one-liner, you can use it anywhere in both React Hook and React Class Component with plain JavaScript.</p>

<p><a href="https://www.hunterisgod.com/?city=Leipzig" rel="noreferrer">https://www.hunterisgod.com/?city=Leipzig</a> </p>

<pre><code>let city = (new URLSearchParams(window.location.search)).get("city")
</code></pre>


blocks|key|4434936|text|你可以检查react-router，简单地说，你可以使用代码来获取查询参数，只要你在你的路由器中定义：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4434937|this.props.params.userId|code-block|syntax|javascript|4434938|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/reactjs/react-router^0|5|C|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>you can check the  <a href="https://github.com/reactjs/react-router">react-router</a>, in simple,you can use the code to get query parameter as long as you defined in your router:</p>

<pre><code>this.props.params.userId
</code></pre>


blocks|key|4434801|text|如果您的路由器像这样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4434802|<Route+exact+path="/category/:id"+component={ProductList}/>|code-block|syntax|javascript|4434803|你会得到这样的id：|4434804|this.props.match.params.id|4434805|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If your Router is like this</p>

<pre><code>&lt;Route exact path="/category/:id" component={ProductList}/&gt;
</code></pre>

<p>You will get that id like this</p>

<pre><code>this.props.match.params.id
</code></pre>


blocks|key|4435366|text|http://localhost:8000/#/signin?id=12345|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4435367|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
}|code-block|syntax|javascript|4435368|entityMap|0|LINK|mutability|MUTABLE|url^0|0|13|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|4]]]]

<p>http://localhost:8000/#/signin?id=12345</p>
<pre><code>import React from &quot;react&quot;;
import { useLocation } from &quot;react-router-dom&quot;;

const MyComponent = () =&gt; {
  const search = useLocation().search;
const id=new URLSearchParams(search).get(&quot;id&quot;);
console.log(id);//12345
}
</code></pre>


blocks|key|4435354|text|在没有第三方库或复杂解决方案的情况下，只需一行即可完成所有工作。下面是如何实现的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435355|let+myVariable+=+new+URLSearchParams(history.location.search).get('business');|code-block|syntax|javascript|4435356|您唯一需要更改的是带有您自己的参数名称的单词“business”。|4435357|示例url.com?business=hello|4435358|myVariable的结果将是hello|4435359|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>do it all in one line without 3rd party libraries or complicated solutions. Here is how</p>
<pre><code>let myVariable = new URLSearchParams(history.location.search).get('business');
</code></pre>
<p>the only thing you need to change is the word 'business' with your own param name.</p>
<p>example url.com?business=hello</p>
<p>the result of myVariable will be hello</p>


blocks|key|4434985|text|如果你没有得到this.props..。根据其他答案，您可能需要使用withRouter+(docs+v4)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4434986|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))|code-block|syntax|javascript|4434987|entityMap|0|LINK|mutability|MUTABLE|url|https://reacttraining.com/react-router/web/api/withRouter^0|7|A|Y|A|1A|7|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>If you aren't getting the <code>this.props</code>... you were expecting based on the other answers, you may need to use <code>withRouter</code> (<a href="https://reacttraining.com/react-router/web/api/withRouter" rel="noreferrer">docs v4</a>):</p>

<pre><code>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 (
      &lt;div&gt;You are now at {location.pathname}&lt;/div&gt;
    )
  }
}

// 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))
</code></pre>


blocks|key|4434849|text|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
++++})
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4434850|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|4435144|text|可能有点晚了，但是这个react钩子可以帮助你在URL+query：https://github.com/rudyhuynh/use-url-search-params+(由我写的)中获取/设置值。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4435145|无论是否使用react-router，它都能正常工作。下面是您案例中的代码示例：|style|CODE|4435146|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>
++)
}|code-block|syntax|javascript|4435147|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/rudyhuynh/use-url-search-params^0|Y|1E|0|0|6|C|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>Maybe a bit late but this react hook can help you get/set values in URL query: <a href="https://github.com/rudyhuynh/use-url-search-params" rel="noreferrer">https://github.com/rudyhuynh/use-url-search-params</a> (written by me).</p>

<p>It works with or without <code>react-router</code>.
Below is code sample in your case:</p>

<pre><code>import React from "react";
import { useUrlSearchParams } from "use-url-search-params";

const MyComponent = () =&gt; {
  const [params, setParams] = useUrlSearchParams()
  return (
    &lt;div&gt;
      __firebase_request_key: {params.__firebase_request_key}
    &lt;/div&gt;
  )
}
</code></pre>


blocks|key|4434888|text|this.props.params.your_param_name将起作用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4434889|这是从查询字符串中获取参数的方法。|4434890|请使用console.log(this.props);来探索所有的可能性。|4434891|entityMap^0|0|X|0|0|3|O|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

<p><code>this.props.params.your_param_name</code> will work.</p>

<p>This is the way to get the params from your query string.<br/>
Please do <code>console.log(this.props);</code> to explore all the possibilities.</p>


blocks|key|4435382|text|你可以创建一个简单的钩子来从当前位置提取搜索参数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435383|import+React+from+'react';
import+{+useLocation+}+from+'react-router-dom';

export+function+useSearchParams<ParamNames+extends+string[]>(...parameterNames:+ParamNames):+Record<ParamNames[number],+string+%7C+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+%7C+null>);
++++},+[+search,+parameterNames.join(',')+]);+//+join+for+sake+of+reducing+array+of+strings+to+simple,+comparable+string
}|code-block|syntax|javascript|4435384|然后你可以在你的函数组件中使用它，如下所示：|4435385|//+current+url:+http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
const+{+__firebase_request_key+}+=+useSearchParams('__firebase_request_key');|4435386|//+current+url:+http://localhost:3000/home?b=value
const+searchParams+=+useSearchParameters('a',+'b');+//+{a:+null,+b:+'value'}|4435387|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You could create simple hook for extracting search params from current location:</p>

<pre><code>import React from 'react';
import { useLocation } from 'react-router-dom';

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

<p>then you could use it inside your functional component like this:</p>

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

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


blocks|key|4434959|text|在需要访问参数的组件中，您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4434960|this.props.location.state.from.search|offset|length|style|CODE|4434961|这将显示整个查询字符串(+?符号之后的所有内容)|4434962|entityMap^0|0|0|11|0|D|1|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

<p>In the component where you need to access the parameters you can use</p>

<p><code>this.props.location.state.from.search</code></p>

<p>which will reveal the whole query string (everything after the <code>?</code> sign)</p>


blocks|key|4434843|text|我使用了一个名为query-string的外部包来解析url参数，如下所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4434844|import+React,+{Component}+from+'react'
import+{+parse+}+from+'query-string';

resetPass()+{
++++const+{password}+=+this.state;
++++this.setState({fetching:+true,+error:+undefined});
++++const+query+=+parse(location.search);
++++return+fetch(settings.urls.update_password,+{
++++++++method:+'POST',
++++++++headers:+{'Content-Type':+'application/json',+'Authorization':+query.token},
++++++++mode:+'cors',
++++++++body:+JSON.stringify({password})
++++})
++++++++.then(response=>response.json())
++++++++.then(json=>{
++++++++++++if+(json.error)
++++++++++++++++throw+Error(json.error.message+%7C%7C+'Unknown+fetch+error');
++++++++++++this.setState({fetching:+false,+error:+undefined,+changePassword:+true});
++++++++})
++++++++.catch(error=>this.setState({fetching:+false,+error:+error.message}));
}|code-block|syntax|javascript|4434845|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I used an external package called query-string to parse url parameter like so.</p>

<pre><code>import React, {Component} from 'react'
import { parse } from 'query-string';

resetPass() {
    const {password} = this.state;
    this.setState({fetching: true, error: undefined});
    const query = parse(location.search);
    return fetch(settings.urls.update_password, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'Authorization': query.token},
        mode: 'cors',
        body: JSON.stringify({password})
    })
        .then(response=&gt;response.json())
        .then(json=&gt;{
            if (json.error)
                throw Error(json.error.message || 'Unknown fetch error');
            this.setState({fetching: false, error: undefined, changePassword: true});
        })
        .catch(error=&gt;this.setState({fetching: false, error: error.message}));
}
</code></pre>


blocks|key|4435261|text|当您使用react路由时，dom将使用for+match清空对象，但是如果您执行以下代码，那么它将用于es6组件，因为它直接用于函数组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435262|import+{+Switch,+Route,+Link+}+from+"react-router-dom";

<Route+path="/profile"+exact+component={SelectProfile}+/>
<Route
++path="/profile/:profileId"
++render={props+=>+{
++++return+<Profile+{...props}+loading={this.state.loading}+/>;
++}}
/>
</Switch>
</div>|code-block|syntax|javascript|4435263|这样你就可以获得道具，并匹配参数和配置文件id|4435264|在对es6组件进行了大量研究后，这对我来说很有效。|4435265|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>When you work with react route dom then will empty object with for match but if you do the following code then it will for es6 component as well as it works directly for function component</p>

<pre><code>import { Switch, Route, Link } from "react-router-dom";

&lt;Route path="/profile" exact component={SelectProfile} /&gt;
&lt;Route
  path="/profile/:profileId"
  render={props =&gt; {
    return &lt;Profile {...props} loading={this.state.loading} /&gt;;
  }}
/&gt;
&lt;/Switch&gt;
&lt;/div&gt;
</code></pre>

<p>This way you can get props and match params and profile id </p>

<p>This worked for me after a lot of research on es6 component. </p>


blocks|key|4435438|text|在typescript中，请参见下面的代码片段：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435439|const+getQueryParams+=+(s?:+string):+Map<string,+string>+=>+{
++if+(!s+%7C%7C+typeof+s+!==+'string'+%7C%7C+s.length+<+2)+{
++++return+new+Map();
++}

++const+a:+[string,+string][]+=+s
++++.substr(1)+//+remove+`?`
++++.split('&')+//+split+by+`&`
++++.map(x+=>+{
++++++const+a+=+x.split('=');
++++++return+[a[0],+a[1]];
++++});+//+split+by+`=`

++return+new+Map(a);
};|code-block|syntax|javascript|4435440|在react+with+react-router-dom中，您可以执行以下操作|offset|length|style|CODE|4435441|const+{useLocation}+from+'react-router-dom';
const+s+=+useLocation().search;
const+m+=+getQueryParams(s);|4435442|请参见下面的示例|4435443|​|4435444|//+below+is+the+transpiled+and+minified+ts+functions+from+above
const+getQueryParams=t=>{if(!t%7C%7C"string"!=typeof+t%7C%7Ct.length<2)return+new+Map;const+r=t.substr(1).split("&").map(t=>{const+r=t.split("=");return[r[0],r[1]]});return+new+Map(r)};
+++
//+an+example+query+string
const+s+=+'?arg1=value1&arg2=value2'

const+m+=+getQueryParams(s)
console.log(m.get('arg1'))
console.log(m.get('arg2'))
console.log(m.get('arg3'))+//+does+not+exist,+returns+undefined|4435445|4435446|entityMap^0|0|0|C|G|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@$I|10|J|11|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|13|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|14|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|U|3|R|5|6|7|16|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<p>in typescript, see snippet below for example:</p>
<pre><code>const getQueryParams = (s?: string): Map&lt;string, string&gt; =&gt; {
  if (!s || typeof s !== 'string' || s.length &lt; 2) {
    return new Map();
  }

  const a: [string, string][] = s
    .substr(1) // remove `?`
    .split('&amp;') // split by `&amp;`
    .map(x =&gt; {
      const a = x.split('=');
      return [a[0], a[1]];
    }); // split by `=`

  return new Map(a);
};
</code></pre>
<p>in react with <code>react-router-dom</code>, you can do</p>
<pre><code>const {useLocation} from 'react-router-dom';
const s = useLocation().search;
const m = getQueryParams(s);
</code></pre>
<p>see example below</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// below is the transpiled and minified ts functions from above
const getQueryParams=t=&gt;{if(!t||"string"!=typeof t||t.length&lt;2)return new Map;const r=t.substr(1).split("&amp;").map(t=&gt;{const r=t.split("=");return[r[0],r[1]]});return new Map(r)};
   
// an example query string
const s = '?arg1=value1&amp;arg2=value2'

const m = getQueryParams(s)
console.log(m.get('arg1'))
console.log(m.get('arg2'))
console.log(m.get('arg3')) // does not exist, returns undefined</code></pre>
</div>
</div>
</p>


blocks|key|4435568|text|如果您使用的是functional组件，请使用let+{+redirectParam+}+=+useParams();|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4435569|它是一个类组件|4435570|constructor+(props)+{++
++++++++super(props);
++++++++console.log(props);
++++++++console.log(props.match.params.redirectParam)
}
async+componentDidMount(){+
++++++++console.log(this.props.match.params.redirectParam)
}|code-block|syntax|javascript|4435571|entityMap^0|N|10|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>Use  <code>let { redirectParam } = useParams();</code> for if you're using the functional component</p>
<p>It's a class component</p>
<pre><code>constructor (props) {  
        super(props);
        console.log(props);
        console.log(props.match.params.redirectParam)
}
async componentDidMount(){ 
        console.log(this.props.match.params.redirectParam)
}
</code></pre>


blocks|key|4435040|text|或者像这样的东西？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435041|​|4435042|let+win+=+{
++'location':+{
++++'path':+'http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla'
++}
}
if+(win.location.path.match('__firebase_request_key').length)+{
++let+key+=+win.location.path.split('__firebase_request_key=')[1]
++console.log(key)
}|code-block|syntax|javascript|4435043|4435044|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Or perhaps something like this?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let win = {
  'location': {
    'path': 'http://localhost:8000/#/signin?_k=v9ifuf&amp;__firebase_request_key=blablabla'
  }
}
if (win.location.path.match('__firebase_request_key').length) {
  let key = win.location.path.split('__firebase_request_key=')[1]
  console.log(key)
}</code></pre>
</div>
</div>
</p>


blocks|key|4435591|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435592|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
}



//+VanillaJS
const+id+=+window.location.search.split("=")[1];
console.log(id);+//101|code-block|syntax|javascript|4435593|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try This</p>
<pre class="lang-js prettyprint-override"><code>http://localhost:4000/#/amoos?id=101

// ReactJS
import React from &quot;react&quot;;
import { useLocation } from &quot;react-router-dom&quot;;

const MyComponent = () =&gt; {
    const search = useLocation().search;
    const id = new URLSearchParams(search).get(&quot;id&quot;);
    console.log(id); //101
}



// VanillaJS
const id = window.location.search.split(&quot;=&quot;)[1];
console.log(id); //101
</code></pre>


blocks|key|4435406|text|您可以使用这个用Typescript编写的简单钩子|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4435407|const+useQueryParams+=+(query:+string+=+null)+=>+{++++++
++++const+result:+Record<string,+string>+=+{};
++++new+URLSearchParams(query%7C%7Cwindow.location.search).forEach((value,+key)+=>+{
++++++result[key]+=+value;
++++});
++++return+result;
}|code-block|syntax|javascript|4435408|用法：|4435409|//+http://localhost:3000/?userId=1889&num=112
const+{+userId,+num+}+=+useQueryParams();
//+OR
const+params+=+useQueryParams('userId=1889&num=112');|4435410|entityMap^0|8|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>You can use this simple hook written in <code>Typescript</code>:</p>
<pre><code>const useQueryParams = (query: string = null) =&gt; {      
    const result: Record&lt;string, string&gt; = {};
    new URLSearchParams(query||window.location.search).forEach((value, key) =&gt; {
      result[key] = value;
    });
    return result;
}
</code></pre>
<p>Usage:</p>
<pre><code>// http://localhost:3000/?userId=1889&amp;num=112
const { userId, num } = useQueryParams();
// OR
const params = useQueryParams('userId=1889&amp;num=112');
</code></pre>


blocks|key|4435129|text|export+class+ClassName+extends+Component{
++++++constructor(props){
++++++++super(props);
++++++++this.state+=+{
++++++++++id:parseInt(props.match.params.id,10)
++++++++}
++++}
+++++render(){
++++++++return(
++++++++++//Code
++++++++++{this.state.id}
++++++++);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4435130|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>export class ClassName extends Component{
      constructor(props){
        super(props);
        this.state = {
          id:parseInt(props.match.params.id,10)
        }
    }
     render(){
        return(
          //Code
          {this.state.id}
        );
}
</code></pre>


blocks|key|4435310|text|您也可以使用react-location-query包，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4435311|++const+[name,+setName]+=+useLocationField("name",+{
++++type:+"string",
++++initial:+"Rostyslav"
++});

++return+(
++++<div+className="App">
++++++<h1>Hello+{name}</h1>
++++++<div>
++++++++<label>Change+name:+</label>
++++++++<input+value={name}+onChange={e+=>+setName(e.target.value)}+/>
++++++</div>
++++</div>
++);|code-block|syntax|javascript|4435312|名称-获取值setName+=设置值|4435313|这个包有很多选项，在docs+on+Github中阅读更多|4435314|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/react-location-query|1|https://github.com/kitsoRik/react-location-query/tree/master/docs^0|6|K|0|0|0|0|A|E|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>You also can use <a href="https://www.npmjs.com/package/react-location-query" rel="nofollow noreferrer">react-location-query</a> package, example:</p>
<pre><code>  const [name, setName] = useLocationField(&quot;name&quot;, {
    type: &quot;string&quot;,
    initial: &quot;Rostyslav&quot;
  });

  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;h1&gt;Hello {name}&lt;/h1&gt;
      &lt;div&gt;
        &lt;label&gt;Change name: &lt;/label&gt;
        &lt;input value={name} onChange={e =&gt; setName(e.target.value)} /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
</code></pre>
<p>name - to get value
setName = to set value</p>
<p>This package has many options, read more in <a href="https://github.com/kitsoRik/react-location-query/tree/master/docs" rel="nofollow noreferrer">docs on Github</a></p>


blocks|key|4435094|text|let+data+=+new+FormData();
data.append('file',+values.file);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4435095|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>let data = new FormData();
data.append('file', values.file);
</code></pre>


<p>How can I define a route in my routes.jsx file to capture the <code>__firebase_request_key</code> parameter value from a URL generated by Twitter's single sign on process after the redirect from their servers?</p>

<pre><code>http://localhost:8000/#/signin?_k=v9ifuf&amp;__firebase_request_key=blablabla
</code></pre>

<p>I tried with the following routes configuration, but the <code>:redirectParam</code> is not catching the mentioned param:</p>

<pre><code>&lt;Router&gt;
  &lt;Route path="/" component={Main}&gt;
    &lt;Route path="signin" component={SignIn}&gt;
      &lt;Route path=":redirectParam" component={TwitterSsoButton} /&gt;
    &lt;/Route&gt;
  &lt;/Route&gt;
&lt;/Router&gt;
</code></pre>


How to get parameter value from query string?

单点登录

服务器

路由器

路由

JSON

我如何在我的routes.jsx文件中定义一个路由，以便在从推特的服务器重定向后，从推特的单点登录过程生成的URL中捕获__firebase_request_key参数值？http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla我尝试了以下路由配置，但:redirectParam没有捕获到提到的参数：<Rou

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

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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