react-router @4用法整理

piglei 發布于2019-08-21 17:52 / 586人閱讀

摘要：官方文檔源碼這篇文章主要介紹了的基本用法包括動態路由編程式導航等安裝用法動態路由的基本用法編程式導航總結安裝用法示例代碼關于路由重定向使用的格式注意位置需要在定義路由的后面比如重定向就需要寫在后面關于路由匹配默認寫在路由末尾前

router@4

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

這篇文章主要介紹了react-router@4的基本用法,包括動態路由,編程式導航等

安裝

switch用法

動態路由的基本用法

編程式導航(withRouter)

總結

安裝

npm i react-router-dom -S

switch用法
示例代碼:

import { Switch, BrowserRouter as Router, Route, Redirect} from "react-router-dom";
class SwitchCom extends Component {
    render() {
        return (
            
                
                    
                    
                    
                               
                    
                    
                    
                
            
        )
    }
}

關于路由重定向: 使用Redirect..from..to的格式,注意位置需要在定義to路由的后面,比如to="/home",重定向就需要寫在Route path="/home" 后面
關于404路由匹配,默認寫在路由末尾,前面的路由都不匹配時,自動匹配404
關于Route,必須寫在Router標簽里面,否則會報錯

3.動態路由的基本用法:

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

    
    
    
    
    
        首頁列表項目 
        資訊
        課程
        我的

上面的exact表示絕對匹配/index,如果不注明exact,則/index還會匹配/index/new等等
上面代碼實現了一個類似tabbar切換的效果

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

4.編程式導航(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循環的每一項


export default withRouter(Header);

引入withRouter之后,就可以使用編程式導航進行點擊跳轉, 需要注意的是export default的暴露如上面所寫,如果結合redux使用,則暴露方式為: withRouter(connect(...)(MyComponent))
調用history的goBack方法會返回上一歷史記錄
調用history的push方法會跳轉到目標頁,如上面goDetail方法
跳轉傳參: push()可以接收一個對象參數,跳轉之后,通過this.props.location.state接收

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90144.html

前端學習資源整理

稍微整理了一下自己平時看到的前端學習資源，分享給大家。 html MDN：Mozilla開發者網絡 SEO：前端開發中的SEO css 張鑫旭：張鑫旭的博客 css精靈圖：css精靈圖實踐柵格系統：詳解CSS中的柵格系統媒體查詢：css媒體查詢用法 rem布局：手機端頁面自適應布局移動前端開發之viewport的深入理解:深入理解viewport 淘寶前端布局：手機淘寶移動端布局 fl...

siberiawolf 2019-08-21 11:27 評論0 收藏0
react+react-router4+redux最新版構建分享

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

weapon 2019-08-21 11:53 評論0 收藏0
react-router4以后動態加載解決辦法（code-split）

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

FingerLiu 2019-08-20 16:38 評論0 收藏0
[ 一起學React系列 -- 11 ] React-Router4 (1)

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

tinysun1234 2019-08-23 14:49 評論0 收藏0
手挽手帶你學React：三檔 React-router4.x的使用

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

SunZhaopeng 2019-08-23 15:11 評論0 收藏0