react路由傳參(4種方式)

1、通過params傳參(刷新頁面后參數不消失，參數會在地址欄顯示)

路由頁面： //注意要配置 /:id

路由跳轉并傳遞參數：鏈接方式：XX

//或：

XXjs方式：this.props.history.push('/demo/'+'6')

//或：

this.props.history.push({pathname:'/demo/'+'6'})

獲取參數：this.props.match.params.id //注意這里是match而非history

params傳參(多個動態參數)state={

id:88,

name:'Jack',

}

路由頁面：

路由跳轉并傳遞參數：鏈接方式：XXjs方式：this.props.history.push({pathname:`/demo/${this.state.id}/${this.state.name}`})

獲取參數：this.props.match.params //結果 {id: "88", name: "Jack"}

2、通過query傳參(刷新頁面后參數消失)

路由頁面： //無需配置

路由跳轉并傳遞參數：鏈接方式：XXjs方式：this.props.history.push({pathname:'/demo',query:{id:22,name:'dahuang'}})

獲取參數：this.props.location.query.name

優勢：傳參優雅，傳遞參數可傳對象；

缺點：刷新地址欄，參數丟失

3、通過state傳參( 刷新頁面后參數不消失，state傳的參數是加密的，比query傳參好用)

路由頁面： //無需配置

路由跳轉并傳遞參數：鏈接方式：XXjs方式：this.props.history.push({pathname:'/demo',state:{id:12,name:'dahuang'}})

獲取參數：this.props.location.state.name

優缺點同query

4、通過search

路由頁面：

路由跳轉并傳遞參數：鏈接方式：xxxjs方式：this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});

讀取參數用:this.props.location.search

優缺點同params

總結

以上是生活随笔為你收集整理的react更改路由入参_react怎么路由传参？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。