react router如何傳參

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

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

本教程操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react router怎么傳參

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

1、通配符傳參

Route定義方式：

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

Link組件：

<Link to="/path/通過通配符傳參">通配符</Link>

參數獲取：

this.props.match.params.name

優點:簡單快捷,并且，在刷新頁面的時候，參數不會丟失。

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

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

2、query

Route定義方式：

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

Link組件：

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

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

參數獲取：

this.props.location.query

優點：優雅，可傳對象

缺點：刷新頁面，參數丟失

3、state

Route定義方式：

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

Link組件：

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

參數獲取：

this.props.location.state

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

優點：優雅，可傳對象

缺點：刷新頁面，參數丟失

關于“react router如何傳參”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。