亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

react-router @4用法整理

piglei / 807人閱讀

摘要：官方文檔源碼這篇文章主要介紹了的基本用法包括動(dòng)態(tài)路由編程式導(dǎo)航等安裝用法動(dòng)態(tài)路由的基本用法編程式導(dǎo)航總結(jié)安裝用法示例代碼關(guān)于路由重定向使用的格式注意位置需要在定義路由的后面比如重定向就需要寫在后面關(guān)于路由匹配默認(rèn)寫在路由末尾前

router@4

react-router@4官方文檔
github源碼

這篇文章主要介紹了react-router@4的基本用法,包括動(dòng)態(tài)路由,編程式導(dǎo)航等

安裝

switch用法

動(dòng)態(tài)路由的基本用法

編程式導(dǎo)航(withRouter)

總結(jié)

安裝

npm i react-router-dom -S

switch用法
示例代碼:

import { Switch, BrowserRouter as Router, Route, Redirect} from "react-router-dom";
class SwitchCom extends Component {
    render() {
        return (
            
                
                    
                    
                    
                               
                    
                    
                    
                
            
        )
    }
}
關(guān)于路由重定向: 使用Redirect..from..to的格式,注意位置需要在定義to路由的后面,比如to="/home",重定向就需要寫在Route path="/home" 后面 
關(guān)于404路由匹配,默認(rèn)寫在路由末尾,前面的路由都不匹配時(shí),自動(dòng)匹配404
關(guān)于Route,必須寫在Router標(biāo)簽里面,否則會(huì)報(bào)錯(cuò)

3.動(dòng)態(tài)路由的基本用法:

import { BrowserRouter as Router, Route, NavLink} from "react-router-dom";


    
    
    
    
    
    
        
  • 首頁列表項(xiàng)目 
    • 
        
  • 資訊
    • 
        
  • 課程
    • 
        
  • 我的
    • 
    




上面的exact表示絕對(duì)匹配/index,如果不注明exact,則/index還會(huì)匹配/index/new等等
上面代碼實(shí)現(xiàn)了一個(gè)類似tabbar切換的效果

關(guān)于NavLink 和 Link:
如果僅僅需要匹配路由,使用Link就可以了,而NavLink的不同在于可以給當(dāng)前選中的路由添加樣式, 比如上面寫到的activeStyle和activeClassName

4.編程式導(dǎo)航(withRouter用法)

import {withRouter} from "react-router-dom";

goBack(){
    this.props.history.goBack();
}  
goDetail(){
    this.props.history.push("/detail");
}  
goDetailWithParam(item){
    this.props.history.push({pathname : "/cart",state:{item}});
}
    

    

//這里的item來自for循環(huán)的每一項(xiàng)

  • 

export default withRouter(Header);
    • 引入withRouter之后,就可以使用編程式導(dǎo)航進(jìn)行點(diǎn)擊跳轉(zhuǎn), 需要注意的是export default的暴露如上面所寫,如果結(jié)合redux使用,則暴露方式為: withRouter(connect(...)(MyComponent))
    調(diào)用history的goBack方法會(huì)返回上一歷史記錄
    調(diào)用history的push方法會(huì)跳轉(zhuǎn)到目標(biāo)頁,如上面goDetail方法
    跳轉(zhuǎn)傳參:  push()可以接收一個(gè)對(duì)象參數(shù),跳轉(zhuǎn)之后,通過this.props.location.state接收

    5 總結(jié):
    剛做過一個(gè)React的項(xiàng)目,搭配路由選擇了react-router @4 ,收獲挺多的,打算寫文章記錄一下收獲(也算是遇到的一些坑). 感覺@4比之前的router版本更加靈活一些,用法也更加簡(jiǎn)潔.還是挺好用的.官方文檔也只是用到哪些就看一看,并沒有從頭看到尾,所以理解還不是很深刻,如果上面理解有偏差,還望指出,共同進(jìn)步.

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90144.html

    相關(guān)文章

    • 前端學(xué)習(xí)資源整理

      稍微整理了一下自己平時(shí)看到的前端學(xué)習(xí)資源，分享給大家。 html MDN：Mozilla開發(fā)者網(wǎng)絡(luò) SEO：前端開發(fā)中的SEO css 張?chǎng)涡瘢簭場(chǎng)涡竦牟┛?css精靈圖：css精靈圖實(shí)踐 柵格系統(tǒng)：詳解CSS中的柵格系統(tǒng) 媒體查詢：css媒體查詢用法 rem布局：手機(jī)端頁面自適應(yīng)布局 移動(dòng)前端開發(fā)之viewport的深入理解:深入理解viewport 淘寶前端布局：手機(jī)淘寶移動(dòng)端布局 fl...

      siberiawolf 評(píng)論0 收藏0

    • react+react-router4+redux最新版構(gòu)建分享

      摘要：相關(guān)配置請(qǐng)參考中文文檔。關(guān)于的更多使用方法及理解需要詳細(xì)具體講解，涉及篇幅較大，本文暫不涉及，有興趣可以看文檔中文文檔，我會(huì)整理后再單獨(dú)章節(jié)分享接下來我們將編寫路由組件這與有一些差別，原來的方法已經(jīng)不再使用，在中或組件從中引入。 ??????相信很多剛?cè)肟覴eact的小伙伴們有一個(gè)同樣的疑惑，由于React相關(guān)庫不斷的再進(jìn)行版本迭代，網(wǎng)上很多以前的技術(shù)分享變得不再適用。比如react-...

      weapon 評(píng)論0 收藏0

    • react-router4以后動(dòng)態(tài)加載解決辦法（code-split）

      摘要：都升級(jí)到了，之前用的，想用新建個(gè)項(xiàng)目用一下首先是用法變了，使用了，本以為錯(cuò)誤在這里，折騰半天發(fā)現(xiàn)不是，第二官方的方案看文檔，不多說，但是，一定會(huì)遇到如下報(bào)錯(cuò)了半天，里，方法里，改寫為世界安靜了地址 react-router都升級(jí)到5.0了，之前用的2.*，想用create-react-app新建個(gè)項(xiàng)目用一下 首先是react-router-redux用法變了，使用了ConnectedR...

      FingerLiu 評(píng)論0 收藏0

    • [ 一起學(xué)React系列 -- 11 ] React-Router4 (1)

      摘要：中的包中的包主要有三個(gè)和。的理念上面提到的理念是一切皆組件以下統(tǒng)一稱組件。從這點(diǎn)來說的確方便了不少，也迎合一切皆組件的理念。組件是中主要的組成單位，可以認(rèn)為是或的路由入口。將該標(biāo)示為嚴(yán)格匹配路由。的屬性追加一條。 2019年不知不覺已經(jīng)過去19天了，有沒有給自己做個(gè)總結(jié)？有沒有給明年做個(gè)計(jì)劃？當(dāng)然筆者已經(jīng)做好了明年的工作、學(xué)習(xí)計(jì)劃；同時(shí)也包括該系列博客剩下的博文計(jì)劃，目前還剩4篇：分別...

      tinysun1234 評(píng)論0 收藏0

    • 手挽手帶你學(xué)React：三檔 React-router4.x的使用

      摘要：我們?cè)趦?nèi)部來渲染不同的組件我們這里采用哈希路由的方式，鑒于的渲染機(jī)制，我們需要把值綁定進(jìn)入內(nèi)部。 手挽手帶你學(xué)React入門三檔,帶你學(xué)會(huì)使用Reacr-router4.x,開始創(chuàng)建屬于你的React項(xiàng)目 什么是React-router React Router 是一個(gè)基于 React 之上的強(qiáng)大路由庫，它可以讓你向應(yīng)用中快速地添加視圖和數(shù)據(jù)流，同時(shí)保持頁面與 URL 間的同步。通俗一...

      SunZhaopeng 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <