React路由組件三種傳參方式分析講解
路由組件和組件的區(qū)別
路由組件時被Router組件使用的組件，this.props里面有三個參數(shù)，分別是history、match、location
可以接收到路由跳轉(zhuǎn)傳參，也可以進行編程式導(dǎo)航跳轉(zhuǎn)
普通組件只有父傳子的props值
Swith內(nèi)置組件使用
作用：當匹配一個路由組件時，其他組件不會被使用，可以加入404頁面，給用戶進行友好提示，提升用戶體驗
react 路由傳參
方式一：url的query方式傳參，在App組件中
//傳值
<Link to='/home?name=張三&age=18'>主頁面</Link>
//接收
<Route path='/home' component={home}></Route>如果我們要打印我們接收到的值，有兩種方式
第一種，在home組件中，創(chuàng)建一個生命周期，然后進行普通的切割、添加、打印即可
componentDidMount(){
console.log(this.props.history.location.search);
let a=this.props.history.location.search.slice(1)
let b=a.split('&')
console.log(b);
let obj={}
b.forEach((item)=>{
item.split('=')
obj[item.split('=')[0]]=item.split('=')[1]
})
console.log(obj);
}第二種：使用querystring，在使用之前，需要下載引入
下載：npm i querystring -D
componentDidMount(){
let a=this.props.history.location.search.slice(1)
console.log(querystring.parse(a));
}在頁面使用：querystring.parse(url形式攜帶的字符串)
方式二：url的params傳參
//傳值
<Link to='/login/zhangsan/18'>登錄</Link>
//接收
<Route path='/login/:name/:age' component={login}></Route>注意：傳入的參數(shù)跟值得長度必須一致，否則會報錯
打印：
componentDidMount(){
// console.log(this.props);
console.log(this.props.match.params);
}方式三：
//傳值
<Link to={{pathname:'/zhuce',user:{name:'張三',age:19}}}>注冊頁面</Link>
//接收
<Route path='/zhuce' component={zhuce}></Route>打?。?/p>
componentDidMount(){
console.log(this.props.location.user);
}編程式導(dǎo)航
我們定義一個按鈕，在按鈕中給他一個點擊事件，在事件函數(shù)中我們進行路由得跳轉(zhuǎn)
home組件
export default class home extends Component {
onchange=()=>{
this.props.history.push('/home/?name=張三&age=19')
}
render() {
return (
<div>
<button onClick={()=>{this.onchange()}}>點擊跳轉(zhuǎn)到home頁</button>
</div>
)
}
}在home 組件中，this.props.history.push后面跟上邊三種傳參方式
app組件
<Link to='/home?name=張三&age=18'>主頁面</Link>
Redirect重定向
跟我們vue中的redirect使用方法相似，用來路由跳轉(zhuǎn)
<Redirect to='/'></Redirect>
到此這篇關(guān)于React路由組件三種傳參方式分析講解的文章就介紹到這了,更多相關(guān)React路由組件傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React Native 中實現(xiàn)確認碼組件示例詳解
這篇文章主要為大家介紹了React Native中實現(xiàn)確認碼組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
本篇文章主要介紹了Parcel 打包示例(React HelloWorld)，詳細的介紹了Parcel打包的特點和使用示例，有興趣的可以了解一下2018-01-01
react函數(shù)組件useState異步,數(shù)據(jù)不能及時獲取到的問題
這篇文章主要介紹了react函數(shù)組件useState異步,數(shù)據(jù)不能及時獲取到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
react native實現(xiàn)往服務(wù)器上傳網(wǎng)絡(luò)圖片的實例
下面小編就為大家?guī)硪黄猺eact native實現(xiàn)往服務(wù)器上傳網(wǎng)絡(luò)圖片的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了如何使用React實現(xiàn)圖片縮放的功能,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴可以了解下2023-10-10
這篇文章主要給大家介紹了React優(yōu)雅的捕獲并處理渲染異常方式,文章通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了react+antd樹選擇下拉框中增加搜索框方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
React動畫實現(xiàn)方案Framer Motion讓頁面自己動起來
這篇文章主要為大家介紹了React動畫實現(xiàn)方案Framer Motion讓頁面自己動起來，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了手把手教您實現(xiàn)react異步加載高階組件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要為大家詳細介紹了react如何自定義實現(xiàn)狀態(tài)管理,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01