react 路由系統

react-router 中的三大組件

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

• Router Router至關於一個容器，不會被渲染出來。你的其餘組件都要放在Router中才能使用到react-router的功能。根據功能的不一樣，Router還分爲BrowserRouter，MemoryRouter等。
• Link Link被渲染稱一個a標籤，一般以聲明式的方式被定義在應用程序中。
• Route Route包含一個path，並指明瞭在path與URL匹配時要渲染的組件。

Router

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

先來講一說BrowserRouter。BrowserRouter主要使用在瀏覽器中，也就是WEB應用中(廢話，看名字就知道了)。它利用HTML5 的history API來同步URL和UI的變化。當咱們點擊了程序中的一個連接以後,BrowserRouter就會找出與這個URL匹配的Route，並將他們渲染出來。 既然BrowserRouter是用來管理咱們的組件的，那麼它固然要被放在最頂級的位置，而咱們的應用程序的組件就做爲它的一個子組件而存在。

import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter>, document.body);

有時候咱們的應用只是整個系統中的一個模塊，好比一個使用了ASPNET MVC中的area的後臺管理模塊，應用中的URL老是以 http://localhost/admin/ 開頭。這種狀況下咱們總不能每次定義Link和Route的時候都帶上admin吧？react-router已經考慮到了這種狀況，因此爲咱們提供了一個basename屬性。爲BrowserRouter設置了basename以後，Link中就能夠省略掉admin了，而最後渲染出來的URL又會自動帶上admin。

<BrowserRouter basename="/admin"/> ... <Link to="/home"/> // 被渲染爲 <a href="/admin/home"> ... </BrowserRouter>

對於WEB應用，BrowserRouter是咱們的首選。可是這裏還有一些Browser Router其餘的兄弟姐妹，在其餘的一些狀況下你或許會用獲得。

• HashRouter 這個內部使用window.location.hash，因爲這裏存在一些問題，所以官方推薦使用BrowserRouter來替代。
• MemoryRouter 主要用在ReactNative這種非瀏覽器的環境中，所以直接將URL的history保存在了內存中。
• StaticRouter 主要用於服務端渲染。

Link

Link就像是一個個的路牌，爲咱們指明組件的位置。Link使用聲明式的方式爲應用程序提供導航功能，定義的Link最終會被渲染成一個a標籤。Link使用to這個屬性來指明目標組件的路徑，能夠直接使用一個字符串，也能夠傳入一個對象。

// 字符串參數 <Link to="/query">查詢</Link> // 對象參數 <Link to={{ pathname: '/query', search: '?key=name', hash: '#hash' }}>查詢</Link>

Link提供的功能並很少，好在咱們還有NavLink能夠選擇。NavLink是一個特殊版本的Link，可使用activeClassName來設置Link被選中時被附加的class，使用activeStyle來配置被選中時應用的樣式。此外，還有一個exact屬性,此屬性要求location徹底匹配纔會附加class和style。這裏說的匹配是指地址欄中的URl和這個Link的to指定的location相匹配。

// 選中後被添加class selected <NavLink to={'/'} exact activeClassName='selected'>Home</NavLink> // 選中後被附加樣式 color:red <NavLink to={'/gallery'} activeStyle={{color:red}}>Gallery</NavLink>

Route

Route應該是react-route中最重要的組件了，它的做用是當location與Route的path匹配時渲染Route中的Component。若是有多個Route匹配，那麼這些Route的Component都會被渲染。

與Link相似，Route也有一個exact屬性，做用也是要求location與Route的path絕對匹配。

// 當location形如 http://location/時，Home就會被渲染。 // 由於 "/" 會匹配全部的URL，因此這裏設置一個exact來強制絕對匹配。 <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> 

Route的三種渲染方式

1. component

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

1. render

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

<Route path="/home" render={() => { console.log('額外的邏輯'); return (<div>Home</div>); }/>

1. children

這是最特殊的渲染方式。1、它同render相似,是一個function。不一樣的地方在於它會被傳入一個match參數來告訴你這個Route的path和location匹配上沒有。2、第二個特殊的地方在於，即便path沒有匹配上，咱們也能夠將它渲染出來。祕訣就在於前面一點提到的match參數。咱們能夠根據這個參數來決定在匹配的時候渲染什麼，不匹配的時候又渲染什麼。

// 在匹配時，容器的calss是light，<Home />會被渲染 // 在不匹配時，容器的calss是dark，<About />會被渲染 <Route path='/home' children={({ match }) => ( <div className={match ? 'light' : 'dark'}> {match ? <Home/>:<About>} </div> )}/> 

全部路由中指定的組件將被傳入如下三個props。

1. match.
2. location.
3. history.

這裏主要說下match.params.透過這個屬性，咱們能夠拿到從location中解析出來的參數。固然，若是想要接收參數，咱們的Route的path也要使用特殊的寫法。

以下示例，三個Link是一個文章列表中三個連接，分別指向三篇id不一樣的文章。而Route用於渲染文章詳情頁。注意path='/p/:id' ，location中的對應的段會被解析爲id=1 這樣的鍵值。最終這個鍵值會做爲param的鍵值存在。Route中的組件可使用this.props.match.params.id來獲取，示例中使用告終構賦值。

<Link to='/p/1' /> <Link to='/p/2' /> <Link to='/p/3' /> ...... <Route path='/p/:id' render={(match)=<h3>當前文章ID:{match.params.id}</h3>)} />

Redirect

當這個組件被渲染是，location會被重寫爲Redirect的to指定的新location。它的一個用途是登陸重定向，好比在用戶點了登陸並驗證經過以後，將頁面跳轉到我的主頁。

<Redirect to="/new"/>