1.路由
React路由依賴于React Router已亥，React Router保持UI和與URL的同步誉券。它擁有簡單的API與強大的功能桂塞，如：代碼緩沖加載，動態(tài)路由匹配凉逛，建立正確的位置過渡處理性宏。
示例：
import React, { Component } from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router'
const ACTIVE = { color: 'red' }
class App extends Component {
? ? render() { return (<div><h1>我的路由</h1>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li><Link to="/" activeStyle={ACTIVE}>首頁</Link></li>
? ? ? ? ? ? ? ? ? ? <li><Link to="/users" activeStyle={ACTIVE}>用戶頁</Link></li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? {this.props.children}
? ? ? ? ? ? </div>)}}
class Index extends React.Component {
? ? render() {return (<div><h2>Index!</h2></div>)}}
class Users extends React.Component {
? ? render() {return (<div><h2>Users</h2></div>)}}
render((
? ? <Router history={browserHistory}>
? ? ? ? <Route path="/" component={App}>
? ? ? ? ? ? <IndexRoute component={Index}/>
? ? ? ? ? ? <Route path="users" component={Users}></Route>
? ? ? ? </Route>
? ? </Router>
), document.getElementById('app'))
注意：react-router的版本v4.0與之前的版本變化較大，所以現(xiàn)在以最新v4.0的為準(zhǔn)状飞。并且react-router有react-router-dom和react-router-native之分毫胜，一個是web版本书斜，一個是移動App版本。
React-router有三大組件酵使，一個是Router荐吉，一個是Link，另外一個是Route凝化。
1）Router相當(dāng)于一個容器稍坯，不會被渲染出來，其他組件必須放到router中才能使用到react-router的功能搓劫。根據(jù)功能的不同，還分為BrowserRouter和MemoryRouter等
BrowserRouter主要使用在瀏覽器中混巧，它利用HTML5 的history API來同步URL和UI的變化枪向。當(dāng)我們點擊了程序中的一個鏈接之后,BrowserRouter就會找出與這個URL匹配的Route，并將他們渲染出來咧党。 既然BrowserRouter是用來管理我們的組件的秘蛔，那么它當(dāng)然要被放在最頂級的位置，而我們的應(yīng)用程序的組件就作為它的一個子組件而存在傍衡。
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(<BrowserRouter><app/></BrowserRouter>,document.body);
有時候我們的應(yīng)用只是整個系統(tǒng)中的一個模塊深员，比如一個使用了ASPNET MVC中的area的后臺管理模塊，應(yīng)用中的URL總是以?http://localhost/admin/?開頭蛙埂。這種情況下我們總不能每次定義Link和Route的時候都帶上admin吧倦畅？react-router已經(jīng)考慮到了這種情況，所以為我們提供了一個basename屬性绣的。為BrowserRouter設(shè)置了basename之后叠赐，Link中就可以省略掉admin了，而最后渲染出來的URL又會自動帶上admin屡江。
<BrowserRouter basename="/admin"/>
? ? <Link to="/home"/> // 被渲染為 <a href="/admin/home">?
</BrowserRouter>
2）Link被渲染成為一個a標(biāo)簽芭概，通常以聲明的方式被定義。
Link就像是一個個的路牌惩嘉，為我們指明組件的位置罢洲。Link使用聲明式的方式為應(yīng)用程序提供導(dǎo)航功能，定義的Link最終會被渲染成一個a標(biāo)簽文黎。Link使用to這個屬性來指明目標(biāo)組件的路徑惹苗，可以直接使用一個字符串，也可以傳入一個對象臊诊。
// 字符串參數(shù)查詢
<Link to="/query">查詢</Link>
// 對象參數(shù)
<Link to={{
? pathname: '/query',
? search: '?key=name',
? hash: '#hash'
}}>查詢</Link>
Link提供的功能并不多鸽粉，好在我們還有NavLink可以選擇。NavLink是一個特殊版本的Link抓艳，可以使用activeClassName來設(shè)置Link被選中時被附加的class触机，使用activeStyle來配置被選中時應(yīng)用的樣式。此外，還有一個exact屬性,此屬性要求location完全匹配才會附加class和style儡首。這里說的匹配是指地址欄中的URl和這個Link的to指定的location相匹配片任。
// 選中后被添加class selectedHome
<NavLink to={'/'} exact activeClassName='selected'>Home</NavLink>
// 選中后被附加樣式 color:red
<NavLink to={'/gallery'} activeStyle={{color:red}}>Gallery</NavLink>
3）Route包含一個path，并指明了path與URL匹配時渲染的組件蔬胯。
Route應(yīng)該是react-route中最重要的組件了对供，它的作用是當(dāng)location與Route的path匹配時渲染Route中的Component。如果有多個Route匹配氛濒，那么這些Route的Component都會被渲染产场。
與Link類似，Route也有一個exact屬性舞竿，作用也是要求location與Route的path絕對匹配京景。
// 當(dāng)location形如 http://location/時，Home就會被渲染骗奖。
// 因為 "/" 會匹配所有的URL确徙，所以這里設(shè)置一個exact來強制絕對匹配。
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
Route的三種渲染方式：
a) component?
b) render -?render的類型是function执桌，Route會渲染這個function的返回值鄙皇。因此它的作用就是附加一些額外的邏輯。
<Route path="/home" render={() => { return (<div>Home</div>);}/>
c) children -?這是最特殊的渲染方式仰挣。一伴逸、它同render類似,是一個function。不同的地方在于它會被傳入一個match參數(shù)來告訴你這個Route的path和location匹配上沒有椎木。二违柏、第二個特殊的地方在于，即使path沒有匹配上香椎，我們也可以將它渲染出來漱竖。秘訣就在于前面一點提到的match參數(shù)。我們可以根據(jù)這個參數(shù)來決定在匹配的時候渲染什么畜伐，不匹配的時候又渲染什么馍惹。
// 在匹配時，容器的calss是light玛界，<Home />會被渲染
// 在不匹配時万矾，容器的calss是dark，<About />會被渲染
<Route path='/home' children={({ match }) => (<div className={{match?'light':'dark'}>
?{match?<Home/>:<About/>} </div>)}/>
所有路由中指定的組件將被傳入以下三個props: match, location, history.
match.params.透過這個屬性慎框，我們可以拿到從location中解析出來的參數(shù)良狈。對應(yīng)的，我們的Route的path也要使用特殊的寫法笨枯。
如下示例薪丁，三個Link是一個文章列表中三個鏈接遇西，分別指向三篇id不同的文章。而Route用于渲染文章詳情頁严嗜。注意path='/p/:id' 粱檀，location中的對應(yīng)的段會被解析為id=1 這樣的鍵值。最終這個鍵值會作為param的鍵值存在漫玄。Route中的組件可以使用this.props.match.params.id來獲取茄蚯，示例中使用了結(jié)構(gòu)賦值。
<Link to='/p/1' />
<Link to='/p/2' />
<Link to='/p/3' />
<Route path='/p/:id' render={(match)=<h3>當(dāng)前文章ID:{match.params.id}</h3>)} />
Redirect
當(dāng)這個組件被渲染是睦优，location會被重寫為Redirect的to指定的新location渗常。它的一個用途是登錄重定向，比如在用戶點了登錄并驗證通過之后刨秆，將頁面跳轉(zhuǎn)到個人主頁
<Redirect to="/new"/>
