react router路由傳參

北辰狼月發表於2018-06-10
React路由

今天，我們要討論的是react router中Link傳值的三種表現形式。分別為通過萬用字元傳參、query傳參和state傳參。

ps:進入正題前，先說明一下，以下的所有內容都是在react-router V4的版本下。

1.萬用字元傳參

Route定義方式：

<Route path=`/path/:name` component={Path}/>

Link元件：

<Link to="/path/通過萬用字元傳參">萬用字元</Link>

引數獲取：

this.props.match.params.name

注意這個match,許多部落格活文章都是忽略了它，導致取不到值。這裡的this.props.match.params.name === ‘通過萬用字元傳參’。

優點:簡單快捷,並且，在重新整理頁面的時候，引數不會丟失。

缺點:只能傳字串，並且，如果傳的值太多的話，url會變得長而醜陋。

如果，你想傳物件的話，可以用JSON.stringify(),想將其轉為字串，然後另外的頁面接收後，用JSON.parse()轉回去。這裡簡單提一下，不贅述。

2.query

Route定義方式：

<Route path=`/query` component={Query}/>

Link元件：

var query = {
        pathname: `/query`,
        query: `我是通過query傳值 `
}

<Link to={query}>query</Link>

引數獲取：

this.props.location.query

這裡的this.props.location.query === `我是通過query傳值`

優點：優雅，可傳物件

缺點：重新整理頁面，引數丟失

3.state

Route定義方式：

<Link to={state}>state</Link>

Link元件：

var state = {
        pathname: `/state`,
        state: `我是通過state傳值`
    }
    <Route path=`/state` component={State}/>

引數獲取：

this.props.location.state

這裡的this.props.location.state === `我是通過query傳值`

優點：優雅，可傳物件

缺點：重新整理頁面，引數丟失

以下，是我github上demo的地址，各位可以親自嘗試一下

https://github.com/hanwolfxue/react-router-parameter

相關文章