ReactRouter基礎使用（圖文教程）

React是個技術棧，單單使用React很難構建復雜的Web應用程序，很多情況下我們需要引入其他相關的技術

React Router是React的路由庫，保持相關頁面部件與URL間的同步

下面就來簡單介紹其基礎使用，更全面的可參考 指南

1. 它看起來像是這樣

在頁面文件中

在外部腳本文件中

2. 庫的引入

React Router庫的引入，有兩種方式

2.1 瀏覽器直接引入

可以引用 這里 的瀏覽器版本，或者下載之后引入

然后就可以直接使用 ReactRouter 這個對象了，我們可能會使用到其中的幾個屬性

2.2 npm 安裝，通過構建工具編譯引入

npm install --save react-router

安裝好路由庫之后，在腳本文件中引入相關屬性

因瀏覽器目前還不能支持import與export命令，且babel工具不會將require命令編譯，所以我們還得需要如Webpack等構建工具編譯引入

庫引入之后，在ReactDOM的render方法中，就可以使用相關的組件了

3. 路由簡單使用

最基本的，通過URL判斷進入哪個頁面（組件部件）

首先，Router是一個容器，history屬性定義了是用何種方式處理頁面的URL

有三種：

然后，在容器中使用Route組件定義各個路由，通過path指定路徑（可以看到，是不區分大小寫的），通過component指定該路徑使用的組件

也可以直接在Router容器上直接用routes屬性定義各個路由，如

需要注意的是{routes}中只能有一個父級，所以這里加了<p>標簽

另外，路由Route也可以嵌套，在上面的例子中，嵌套起來可能更符合實際情況

需要注意的是，這里的App在父級，為了獲取子級的First與Second組件，需要在App組件中添加 this.props.children 獲取

同樣的，可以直接在Router中用routes屬性定義路由

4. 路由的其他組件

除了基本的Route之外，IndexRoute、Redirect、IndexRedirect、Link、IndexLink等，顧名思義

5. 路由的path規則

path定義的路由的路徑，在hashHistory中，它的主頁路徑是 #/

自定義Route路由通過與父Route的path進行合并，在與主頁路徑合并，得到最終的路徑

path的語法：

而:name可以通過 this.props.params 中取到

通過React Dev Tool也可以看到組件的相關數據

6. 路由的onEnter、onLeave鉤子

在路由的跳轉中，我們可能需要在進入頁面或離開頁面的時候做一些特殊操作，Route 通過 onEnter 與 onLeave 定義了這兩個行為

如上，帶兩個參數，通過 replace 可以更新路徑，把注釋去掉后，進入"/first"時立馬跳轉值"/second"，這在檢測登錄時應該比較有用

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

詳細解答react

react創建單例組件步驟詳解

React native ListView在移動端中添加頂部下拉刷新與底部點擊刷新案例詳解

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com