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

本文翻译自：How to get parameter value from query string

How can I define a route in my routes.jsx file to capture the __firebase_request_key parameter value from a URL generated by Twitter's single sign on process after the redirect from their servers? 从服务器重定向后，如何在Twitter的单点登录过程生成的URL中在route.jsx文件中定义路由以捕获__firebase_request_key参数值？

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

I tried with the following routes configuration, but the :redirectParam is not catching the mentioned param: 我尝试使用以下路由配置，但:redirectParam没有捕获所提到的参数：

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

---

#1楼

参考：https://stackoom.com/question/2OKpq/如何从查询字符串获取参数值

---

#2楼

this.props.params.your_param_name will work. this.props.params.your_param_name将起作用。

This is the way to get the params from your query string. 这是从查询字符串中获取参数的方法。
Please do console.log(this.props); 请执行console.log(this.props); to explore all the possibilities. 探索所有可能性。

---

#3楼

React Router v3 反应路由器v3

React Router already parses the location for you and passes it to your RouteComponent as props. React Router已经为您解析了位置并将其作为道具传递给RouteComponent 。 You can access the query (after ? in the url) part via 您可以通过访问查询（在URL中的？之后）部分

this.props.location.query.__firebase_request_key

If you are looking for the path parameter values, separated with a colon (:) inside the router, these are accessible via 如果要查找路径参数值（在路由器内部用冒号（:)分隔），则可以通过以下方式访问它们

this.props.match.params.redirectParam

This applies to late React Router v3 versions (not sure which). 这适用于最新的React Router v3版本（不确定哪个版本）。 Older router versions were reported to use this.props.params.redirectParam . 据报道，较旧的路由器版本使用this.props.params.redirectParam 。

React Router v4 and React Router v5 React Router v4和React Router v5

React Router v4 does not parse the query for you any more, but you can only access it via this.props.location.search . React Router v4不再为您解析查询，但是您只能通过this.props.location.search访问。 For reasons see nbeuchat's answer . 出于某些原因，请参阅nbeuchat的答案 。

Eg with query-string library imported as qs you could do 例如，将查询字符串库导入为qs即可

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

See this answer for some more ideas on parsing the search string. 有关解析搜索字符串的更多想法，请参见此答案 。

Additionally, if your component is not a direct child of a Switch you need to use withRouter to access any of the router provided props. 另外，如果您的组件不是Switch的直接子代，则需要使用withRouter来访问任何路由器提供的道具。

General 一般

nizam.sp's suggestion to do nizam.sp的建议

console.log(this.props)

will be helpful in any case. 在任何情况下都会有帮助。

---

#4楼

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

this.props.params.userId

---

#5楼

In the component where you need to access the parameters you can use 在需要访问参数的组件中，可以使用

this.props.location.state.from.search

which will reveal the whole query string (everything after the ? sign) 它将显示整个查询字符串（ ?符号之后的所有内容）

---

#6楼

React Router v4 反应路由器v4

Using component 使用component

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

this.props.match.params.id

The component is automatically rendered with the route props. 组件将使用路线道具自动渲染。

Using render 使用render

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

this.props.match.params.id

Route props are passed to the render function. 路线道具将传递给render函数。