欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React路由組件三種傳參方式分析講解

 更新時(shí)間:2022年08月15日 11:44:32   作者:是張魚小丸子鴨  
本文主要介紹了React組件通信之路由傳參(react-router-dom),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

路由組件和組件的區(qū)別

路由組件時(shí)被Router組件使用的組件,this.props里面有三個(gè)參數(shù),分別是history、match、location

可以接收到路由跳轉(zhuǎn)傳參,也可以進(jìn)行編程式導(dǎo)航跳轉(zhuǎn)

普通組件只有父?jìng)髯拥膒rops值

Swith內(nèi)置組件使用

作用:當(dāng)匹配一個(gè)路由組件時(shí),其他組件不會(huì)被使用,可以加入404頁(yè)面,給用戶進(jìn)行友好提示,提升用戶體驗(yàn)

react 路由傳參

方式一:url的query方式傳參,在App組件中

//傳值
<Link to='/home?name=張三&age=18'>主頁(yè)面</Link>
//接收
<Route path='/home' component={home}></Route>

如果我們要打印我們接收到的值,有兩種方式

第一種,在home組件中,創(chuàng)建一個(gè)生命周期,然后進(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));       
    }

在頁(yè)面使用:querystring.parse(url形式攜帶的字符串)

方式二:url的params傳參

//傳值
<Link to='/login/zhangsan/18'>登錄</Link>
//接收
<Route path='/login/:name/:age' component={login}></Route>

注意:傳入的參數(shù)跟值得長(zhǎng)度必須一致,否則會(huì)報(bào)錯(cuò)

打?。?/p>

    componentDidMount(){
        // console.log(this.props);
        console.log(this.props.match.params);
    }

方式三:

//傳值
  <Link to={{pathname:'/zhuce',user:{name:'張三',age:19}}}>注冊(cè)頁(yè)面</Link>
//接收
  <Route path='/zhuce' component={zhuce}></Route>

打印:

componentDidMount(){
        console.log(this.props.location.user);
    }

編程式導(dǎo)航

我們定義一個(gè)按鈕,在按鈕中給他一個(gè)點(diǎn)擊事件,在事件函數(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()}}>點(diǎn)擊跳轉(zhuǎn)到home頁(yè)</button>
      </div>
    )
  }
}

在home 組件中,this.props.history.push后面跟上邊三種傳參方式

app組件

<Link to='/home?name=張三&age=18'>主頁(yè)面</Link>

Redirect重定向

跟我們vue中的redirect使用方法相似,用來路由跳轉(zhuǎn)

<Redirect to='/'></Redirect>

到此這篇關(guān)于React路由組件三種傳參方式分析講解的文章就介紹到這了,更多相關(guān)React路由組件傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 在?React?中如何從狀態(tài)數(shù)組中刪除一個(gè)元素

    在?React?中如何從狀態(tài)數(shù)組中刪除一個(gè)元素

    這篇文章主要介紹了在?React?中從狀態(tài)數(shù)組中刪除一個(gè)元素,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-03-03
  • React性能debug場(chǎng)景解決記錄

    React性能debug場(chǎng)景解決記錄

    這篇文章主要為大家介紹了React性能debug場(chǎng)景解決記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • 一文帶你搞懂react hooks的類型聲明

    一文帶你搞懂react hooks的類型聲明

    這篇文章主要給帶大家搞清楚react hooks的類型聲明,如果有同學(xué)還不清楚react hooks的類型聲明,來看本文就對(duì)了,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2023-07-07
  • React/Redux應(yīng)用使用Async/Await的方法

    React/Redux應(yīng)用使用Async/Await的方法

    本篇文章主要介紹了React/Redux應(yīng)用使用Async/Await的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-11-11
  • React報(bào)錯(cuò)Too many re-renders解決

    React報(bào)錯(cuò)Too many re-renders解決

    這篇文章主要為大家介紹了React報(bào)錯(cuò)Too many re-renders解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • React使用Mobx6.x共享狀態(tài)問題

    React使用Mobx6.x共享狀態(tài)問題

    這篇文章主要介紹了React使用Mobx6.x共享狀態(tài)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 淺談React前后端同構(gòu)防止重復(fù)渲染

    淺談React前后端同構(gòu)防止重復(fù)渲染

    這篇文章主要介紹了淺談React前后端同構(gòu)防止重復(fù)渲染,首先解釋React前后端同構(gòu)、React首屏渲染的概念。然后通過這2個(gè)概念解決服務(wù)端渲染完成后瀏覽器端重復(fù)渲染的問題。有興趣的可以了解一下
    2018-01-01
  • react組件memo useMemo useCallback使用區(qū)別示例

    react組件memo useMemo useCallback使用區(qū)別示例

    這篇文章主要為大家介紹了react組件memo useMemo useCallback使用區(qū)別的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • 三分鐘搞懂react-hooks及實(shí)例代碼

    三分鐘搞懂react-hooks及實(shí)例代碼

    React?Hooks是今年最勁爆的新特性真的毫不夸張。如果你也對(duì)react感興趣,或者正在使用react進(jìn)行項(xiàng)目開發(fā),請(qǐng)抽出點(diǎn)時(shí)間閱讀下此文
    2022-03-03
  • 在console中打印React Fiber樹的操作步驟

    在console中打印React Fiber樹的操作步驟

    React Fiber 是 React 16 中引入的新的協(xié)調(diào)引擎或重寫的核心算法, 真針Fiber的一個(gè)重要的核心概念Fiber Node,這次主要的研究對(duì)象是: 如何從使用者/學(xué)習(xí) 者角度 在js 代碼上 拿到fiber 樹結(jié)構(gòu)的信息,,需要的朋友可以參考下
    2024-04-04

最新評(píng)論