React路由組件三種傳參方式分析講解
更新時間：2022年08月15日 11:44:32 作者：是張魚小丸子鴨
本文主要介紹了React組件通信之路由傳參(react-router-dom)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
路由組件和組件的區(qū)別
路由組件時被Router組件使用的組件，this.props里面有三個參數，分別是history、match、location
可以接收到路由跳轉傳參，也可以進行編程式導航跳轉
普通組件只有父傳子的props值
Swith內置組件使用
作用：當匹配一個路由組件時，其他組件不會被使用，可以加入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>注意：傳入的參數跟值得長度必須一致，否則會報錯
打?。?/p>
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);
}編程式導航
我們定義一個按鈕，在按鈕中給他一個點擊事件，在事件函數中我們進行路由得跳轉
home組件
export default class home extends Component {
onchange=()=>{
this.props.history.push('/home/?name=張三&age=19')
}
render() {
return (
<div>
<button onClick={()=>{this.onchange()}}>點擊跳轉到home頁</button>
</div>
)
}
}在home 組件中，this.props.history.push后面跟上邊三種傳參方式
app組件
<Link to='/home?name=張三&age=18'>主頁面</Link>
Redirect重定向
跟我們vue中的redirect使用方法相似，用來路由跳轉
<Redirect to='/'></Redirect>
到此這篇關于React路由組件三種傳參方式分析講解的文章就介紹到這了,更多相關React路由組件傳參內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了在?React?中從狀態(tài)數組中刪除一個元素,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了React性能debug場景解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要給帶大家搞清楚react hooks的類型聲明，如果有同學還不清楚react hooks的類型聲明，來看本文就對了，文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-07-07
本篇文章主要介紹了React/Redux應用使用Async/Await的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家介紹了React報錯Too many re-renders解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了React使用Mobx6.x共享狀態(tài)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了淺談React前后端同構防止重復渲染，首先解釋React前后端同構、React首屏渲染的概念。然后通過這2個概念解決服務端渲染完成后瀏覽器端重復渲染的問題。有興趣的可以了解一下2018-01-01
react組件memo useMemo useCallback使用區(qū)別示例
這篇文章主要為大家介紹了react組件memo useMemo useCallback使用區(qū)別的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
React?Hooks是今年最勁爆的新特性真的毫不夸張。如果你也對react感興趣，或者正在使用react進行項目開發(fā)，請抽出點時間閱讀下此文2022-03-03
React Fiber 是 React 16 中引入的新的協(xié)調引擎或重寫的核心算法, 真針Fiber的一個重要的核心概念Fiber Node,這次主要的研究對象是： 如何從使用者/學習 者角度 在js 代碼上 拿到fiber 樹結構的信息,,需要的朋友可以參考下2024-04-04