React中的路由系統

react-router中的元件就是react中的元件，隻不過它們被添加了一些特殊的邏輯而已。

Router Router相當于一個容器，不會被渲染出來。你的其他元件都要放在Router中才能使用到react-router的功能。根據功能的不同，Router還分為BrowserRouter，MemoryRouter等。

Link Link被渲染稱一個a标簽，通常以聲明式的方式被定義在應用程式中。

Route Route包含一個path，并指明了在path與URL比對時要渲染的元件。

如果說我們的應用程式是一座小城的話，那麼Route就是一座座帶有門牌号的建築物，而Link就代表了到某個建築物的路線。有了路線和目的地，那麼就缺一位老司機了，沒錯Router就是這個老司機。

先來說一說BrowserRouter。BrowserRouter主要使用在浏覽器中，也就是WEB應用中(廢話，看名字就知道了)。它利用HTML5 的history API來同步URL和UI的變化。當我們點選了程式中的一個連結之後,BrowserRouter就會找出與這個URL比對的Route，并将他們渲染出來。 既然BrowserRouter是用來管理我們的元件的，那麼它當然要被放在最頂級的位置，而我們的應用程式的元件就作為它的一個子元件而存在。

有時候我們的應用隻是整個系統中的一個子產品，比如一個使用了ASPNET MVC中的area的背景管理子產品，應用中的URL總是以 <code>http://localhost/admin/</code> 開頭。這種情況下我們總不能每次定義Link和Route的時候都帶上admin吧？react-router已經考慮到了這種情況，是以為我們提供了一個basename屬性。為BrowserRouter設定了basename之後，Link中就可以省略掉admin了，而最後渲染出來的URL又會自動帶上admin。

對于WEB應用，BrowserRouter是我們的首選。但是這裡還有一些Browser Router其他的兄弟姐妹，在其他的一些情況下你或許會用得到。

HashRouter 這個内部使用window.location.hash，由于這裡存在一些問題，是以官方推薦使用BrowserRouter來替代。

MemoryRouter 主要用在ReactNative這種非浏覽器的環境中，是以直接将URL的history儲存在了記憶體中。

StaticRouter 主要用于服務端渲染。

Link就像是一個個的路牌，為我們指明元件的位置。Link使用聲明式的方式為應用程式提供導航功能，定義的Link最終會被渲染成一個a标簽。Link使用to這個屬性來指明目标元件的路徑，可以直接使用一個字元串，也可以傳入一個對象。

Link提供的功能并不多，好在我們還有NavLink可以選擇。NavLink是一個特殊版本的Link，可以使用activeClassName來設定Link被選中時被附加的class，使用activeStyle來配置被選中時應用的樣式。此外，還有一個exact屬性,此屬性要求location完全比對才會附加class和style。這裡說的比對是指位址欄中的URl和這個Link的to指定的location相比對。

Route應該是react-route中最重要的元件了，它的作用是當location與Route的path比對時渲染Route中的Component。如果有多個Route比對，那麼這些Route的Component都會被渲染。

與Link類似，Route也有一個exact屬性，作用也是要求location與Route的path絕對比對。

component

這是最常用也最容易了解的方式，給什麼就渲染什麼。

render

render的類型是function，Route會渲染這個function的傳回值。是以它的作用就是附加一些額外的邏輯。

children

這是最特殊的渲染方式。一、它同render類似,是一個function。不同的地方在于它會被傳入一個match參數來告訴你這個Route的path和location比對上沒有。二、第二個特殊的地方在于，即使path沒有比對上，我們也可以将它渲染出來。秘訣就在于前面一點提到的match參數。我們可以根據這個參數來決定在比對的時候渲染什麼，不比對的時候又渲染什麼。

所有路由中指定的元件将被傳入以下三個<code>props</code>。

match.

location.

history.

這裡主要說下match.params.透過這個屬性，我們可以拿到從location中解析出來的參數。當然，如果想要接收參數，我們的Route的path也要使用特殊的寫法。

如下示例，三個Link是一個文章清單中三個連結，分别指向三篇id不同的文章。而Route用于渲染文章詳情頁。注意path='/p/:id' ，location中的對應的段會被解析為id=1 這樣的鍵值。最終這個鍵值會作為param的鍵值存在。Route中的元件可以使用this.props.match.params.id來擷取，示例中使用了結構指派。

當這個元件被渲染是，location會被重寫為Redirect的to指定的新location。它的一個用途是登入重定向，比如在使用者點了登入并驗證通過之後，将頁面跳轉到個人首頁。

本文轉自xsster51CTO部落格，原文連結：http://blog.51cto.com/12945177/1950672 ，如需轉載請自行聯系原作者