reactrouter如何傳參

這篇文章主要介紹“react router如何傳參”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“react router如何傳參”文章能幫助大家解決問題。

成都創(chuàng)新互聯(lián)專注于企業(yè)全網整合營銷推廣、網站重做改版、陳巴爾虎網站定制設計、自適應品牌網站建設、H5技術、商城網站制作、集團公司官網建設、成都外貿網站制作、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為陳巴爾虎等各大城市提供網站開發(fā)制作服務。

react router傳參的方法：1、利用通配符傳參，只能傳字符串，在刷新頁面時參數(shù)不會丟失；2、利用query傳參，可以傳對象，但是刷新頁面會導致參數(shù)丟失；3、利用state傳參，可以傳對象、數(shù)組等，一旦刷新頁面參數(shù)就會丟失。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react router路由傳參三種方式：通過通配符傳參、query傳參和state傳參。

1、通配符傳參

Route定義方式：

Link組件：

通配符

參數(shù)獲取：

this.props.match.params.name

優(yōu)點:簡單快捷,并且，在刷新頁面的時候，參數(shù)不會丟失。

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

如果，你想傳對象的話，可以用JSON.stringify(),想將其轉為字符串，然后另外的頁面接收后，用JSON.parse()轉回去。

2、query

Route定義方式：

Link組件：

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

query

參數(shù)獲取：

this.props.location.query

優(yōu)點：優(yōu)雅，可傳對象

缺點：刷新頁面，參數(shù)丟失

3、state

Route定義方式：

state

Link組件：

var state = {undefined
        pathname: '/state',
        state: '我是通過state傳值'
    }

參數(shù)獲取：

this.props.location.state

這里的this.props.location.state === '我是通過query傳值'

優(yōu)點：優(yōu)雅，可傳對象

缺點：刷新頁面，參數(shù)丟失

關于“react router如何傳參”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

當前題目：reactrouter如何傳參
網址分享：http://m.jiaotiyi.com/article/iggdec.html

網站建設知識