React中的url引數——this.props.match

八叉樹發表於2018-09-28
React

有哪些引數

· this.props.match.match

· this.props.match.location

· this.props.match.history

也就是如果我們沒用react-router中的route元件包裹元件，我們就需要通過上面形式獲得url的資訊，都是在match裡面；而如果我們了react-router的route元件，我們就可以直接通過this.props.match,this.props.location,this.porps.history來獲取url資訊。

具體分析

在react元件的componentDidMount方法中列印一下this.props，控制檯可以看到：

img

可以看到頁面的URL資訊全都包含在match欄位中，以地址為例

localhost:3000/app/knowledgeManagement/modify/STY20171011124209535/3/1507701970070/0/?s=1&f=7
複製程式碼

其中各個引數定義對應如下

localhost:3000/app/knowledgeManagement/modify/:studyNo/:stepId/:randomNum/:isDefault/?s=&f=
複製程式碼

列印出this.props.match:

img

可以看到this.props.match中包含的URL資訊是很豐富的，其中

  • history：包含了元件可以使用的各種路由系統的方法，常用的有 push 和 replace，兩者都是跳轉頁面，但是 replace 不會引起頁面的重新整理，僅僅是改變 url。

  • location：相當於URL 的物件形式表示，通過 search 欄位可以獲取到 url 中的 query 資訊。（這裡 state 的含義與 HTML5 history.pushState API 中的 state 物件一樣。每個 URL 都會對應一個 state 物件，你可以在物件裡儲存資料，但這個資料卻不會出現在 URL 中。實際上，資料被存在了 sessionStorage 中）（參考： 深入理解 react-router 路由系統）

  • match：包含了具體的 url 資訊，在 params 欄位中可以獲取到各個路由引數的值。

    通過以上分析，獲取 url 中的指定引數就十分簡單了，下面是幾個例子

    // localhost:3000/app/knowledgeManagement/modify/STY20171011124209535/3/1507701970070/0/?s=1&f=7
// localhost:3000/app/knowledgeManagement/modify/:studyNo/:stepId/:randomNum/:isDefault/?s=1&f=7

// 獲取 studyNo
this.props.match.match.params.studyNo // STY20171011124209535

// 獲取 stepId
this.props.match.match.params.stepId // 3

// 獲取 success
const query = this.props.match.location.search // '?s=1&f=7'
const arr = query.split('&') // ['?s=', 'f=7']
const successCount = arr[0].substr(3) // '1'
const failedCount = arr[1].substr(2) // '7'
複製程式碼

相關文章