如何從查詢字符串獲取參數值

本文翻譯自：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函數。