React路由組件三種傳參方式分析講解
路由組件和組件的區(qū)別
路由組件時被Router組件使用的組件，this.props里面有三個參數(shù)，分別是history、match、location
可以接收到路由跳轉(zhuǎn)傳參，也可以進(jìn)行編程式導(dǎo)航跳轉(zhuǎn)
普通組件只有父傳子的props值
Swith內(nèi)置組件使用
作用：當(dāng)匹配一個路由組件時，其他組件不會被使用，可以加入404頁面，給用戶進(jìn)行友好提示，提升用戶體驗
react 路由傳參
方式一：url的query方式傳參，在App組件中
//傳值
<Link to='/home?name=張三&age=18'>主頁面</Link>
//接收
<Route path='/home' component={home}></Route>如果我們要打印我們接收到的值，有兩種方式
第一種，在home組件中，創(chuàng)建一個生命周期，然后進(jìn)行普通的切割、添加、打印即可
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ù)中我們進(jìn)行路由得跳轉(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?中如何從狀態(tài)數(shù)組中刪除一個元素
這篇文章主要介紹了在?React?中從狀態(tài)數(shù)組中刪除一個元素,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了React性能debug場景解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要給帶大家搞清楚react hooks的類型聲明，如果有同學(xué)還不清楚react hooks的類型聲明，來看本文就對了，文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
React/Redux應(yīng)用使用Async/Await的方法
本篇文章主要介紹了React/Redux應(yīng)用使用Async/Await的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家介紹了React報錯Too many re-renders解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了React使用Mobx6.x共享狀態(tài)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了淺談React前后端同構(gòu)防止重復(fù)渲染，首先解釋React前后端同構(gòu)、React首屏渲染的概念。然后通過這2個概念解決服務(wù)端渲染完成后瀏覽器端重復(fù)渲染的問題。有興趣的可以了解一下2018-01-01
react組件memo useMemo useCallback使用區(qū)別示例
這篇文章主要為大家介紹了react組件memo useMemo useCallback使用區(qū)別的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
React?Hooks是今年最勁爆的新特性真的毫不夸張。如果你也對react感興趣，或者正在使用react進(jìn)行項目開發(fā)，請抽出點時間閱讀下此文2022-03-03
React Fiber 是 React 16 中引入的新的協(xié)調(diào)引擎或重寫的核心算法, 真針Fiber的一個重要的核心概念Fiber Node,這次主要的研究對象是： 如何從使用者/學(xué)習(xí) 者角度 在js 代碼上 拿到fiber 樹結(jié)構(gòu)的信息,,需要的朋友可以參考下2024-04-04