React-Router

首先,React Router 是一個基于react之上的強大的路由庫,你可以通過他實現快速的添加視圖和數據流,同時保持頁面與URL之間的同步。

路由配置是一組指令,用來告訴router如何匹配URL以及匹配之后如何執行代碼。

Router 只是一個容器用來存放route的盒子,route只有在router容器中才會起作用

Route 是具體的路由的配置,參數:?path,component,path配置的是路由的的匹配規則,這個屬性是可以省略的,這樣的haunted,不管路徑是否匹配,總是會加載制定組件。component配置的是具體記載的是哪一個組件。

IndexRoute 組件用來指定默認情況下加載的子組件。它的參數是:component,用來指定加載的組件。

Redirect 組件用于路由的跳轉,即用戶訪問一個路由,會自動跳轉到另外一個路由。參數:from to ?from 是當前的路由的路徑,to是要跳轉的路由的路徑

{/* 從 /inbox/messages/:id跳轉到 /messages/:id*/}?

<Route path='inbox' component={Inbox}>

? ? ? ? <Redirect ? ?from="messages/:id" ? to="/messages/:id"/>

</Route>

上面的例子中,當訪問/inbox/messages/5,會自動跳轉到/messages/5(也就是由原來的相對路徑跳轉到了絕對路徑)。

IndexRedirect 組件用于訪問根路由的時候將用戶重定向到某個子組件。參數to 用于指定默認進入的路由

<Route ? path="/" ? ?component={App}>

? ? ? ? ? ? ? <IndexRedirect ? ? ? ?to="/welcome"/>?

? ? ? ? ? ? ? <Route ? ?path="welcome" ? ? ? component={Welcome} ? />

? ? ? ? ? ? ? ?<Route ? ?path="welcome" ? ? ?component={Welcome}? />

< /Route>

上面的例子中,當用戶訪問跟路由的時候,會自動重定向到子組件 welcome 組件上。

Link 組件用于取代<a>元素(實際他就是a鏈接,在網頁上查看元素的話顯示的就是a標簽),生成一個鏈接,允許用戶點擊后跳轉到另一個路由,它的參數是:to ,activeStyle,activeClassName,onlyActiveOnIndex。 to用于指定跳轉的路由,activeStyle點擊之后的樣式,activeClassName配置的是點擊之后要添加的class,onlyActiveOnIndex它的作用和下面的IndexLink的作用類似,具體事例見IndexLink下的代碼。

IndexLink 用于鏈接到根路由。因為對于跟路由來說,activeStyle和activeClassName會失效(實際是總是生效),因為 / ?會匹配任何自路由,二IndexLink組件會使用路徑的精確匹配。 參數:to , activeClassName作用和上面的Link的參數作用類似。

? <Link to="/" activeClassName="active" onlyActiveOnIndex={true}>

? ? ? ?Home

</Link>

路由的鉤子:每個路由都有EnterLeave鉤子,用戶進入或離開該路由的時候會觸發??梢酝ㄟ^定義 onEnter,和 routerWillLeave 方法來實現一些功能。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容

  • Lesson11、首先確保安裝了Node.js和npm依賴包管理工具2、在git上克隆官方示例程序 git clo...
    冰_心閱讀 2,731評論 0 16
  • 概述 傳統開發中的 路由,是由服務端根據不同的用戶請求地址 URL,返回不同內容的頁面,而前端路由則將這些任務通過...
    楊慧莉閱讀 1,086評論 1 2
  • react-router 一、基本使用 安裝 引入 示例 二、路由嵌套 1. 方法一: 2. 方法二: 訪問'/r...
    lvhaohua閱讀 3,703評論 0 2
  • React Router 4.0 (以下簡稱 RR4) 已經正式發布,它遵循React的設計理念,即萬物皆組件。所...
    梁相輝閱讀 97,588評論 24 195
  • 01. 正月十五上元節,銀河隕落,點亮人間。 鹿喲喲坐在梨樹下,托腮望著凌江對岸,鳳簫聲動,玉壺光轉,煙火之氣撲面...
    周久久閱讀 1,532評論 12 17