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=&#39;/path/:name&#39; component={Path}/>

Link元件：

<Link to="/path/通过通配符传参">通配符</Link>

參數取得：

this.props.match.params.name

優點:簡單快速,並且，在刷新頁面的時候，參數不會遺失。

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

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

2、query

Route定義方式：

<Route path=&#39;/query&#39; 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=&#39;/state&#39; component={State}/>

參數取得：

this.props.location.state

##這裡的this.props.location.state === '我是透過query傳值'

優點：優雅，可傳物件

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

推薦學習：《

react影片教學

》

以上是react router怎麼傳參的詳細內容。更多資訊請關注PHP中文網其他相關文章！