react router @4 和 vue路由 詳解(五)react怎麼經過路由傳參

完整版：http://www.javashuo.com/article/p-rfhkumuv-be.html

七、react怎麼經過路由傳參？

　　a、通配符傳參(刷新頁面數據不丟失)

//在定義路由的時候

<Route path='/path/:本身起個名字' component={Path}/>


//在路由點擊跳轉的時候

<Link to="/path/你要傳的參數">通配符</Link>


//另外一個頁面接收傳來的參數

this.props.match.params.你起的名字

　　

　　     舉個🌰

　　     

　　　  另外一個頁面接收值的時候：

　　　　　　　　this.props.match.params.id

 

　　b、query傳參(刷新頁面數據丟失)

//路由定義

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

//跳轉的時候
var query = {
        pathname: '/query',
        query: '我是經過query傳值 '
}

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

//另外一個頁面使用的時候

this.props.location.query

這裏的this.props.location.query === '我是經過query傳值'

 

　　c、state傳參(刷新頁面數據丟失，同query差很少，只是屬性不同，並且state傳的參數是加密的，query傳的參數是公開的) 

//Route定義

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

//使用的時候

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

//另外一個頁面獲取值的時候

this.props.location.state

這裏的this.props.location.state === '我是經過query傳值'

 

　　d、路由？傳參數

           

　　　  此處的foodmenu經過路由？後面傳參數

　　　  在另外一個頁面的this.props.location.search能夠獲取到 "?id=6"