react-router 是 React 最常用的路由庫，沒有之一浓领，它除了功能比較欠缺翼虫，更新比較抽風(fēng)饼齿，隔代基本大改之外，嗯……沒有什么其他大缺點(diǎn)触创。
基本來說坎藐，你每更新一代就會發(fā)現(xiàn)你以前寫的代碼基本都要大改，這是挺煩的一點(diǎn)哼绑，當(dāng)然，官方會提供遷移的方案碉咆，但總歸是令人挺不爽的抖韩。
簡介
首先，react-router 不是必需的疫铜，你完全可以自己造個路由輪子來簡單代替它茂浮，如果你的需求不高的話。
import React from 'react'
import { render } from 'react-dom'
const About = React.createClass({/*...*/})
const Inbox = React.createClass({/*...*/})
const Home = React.createClass({/*...*/})
const App = React.createClass({
getInitialState() {
return {
route: window.location.hash.substr(1)
}
},
componentDidMount() {
window.addEventListener('hashchange', () => {
this.setState({
route: window.location.hash.substr(1)
})
})
},
render() {
let Child
switch (this.state.route) {
case '/about': Child = About; break;
case '/inbox': Child = Inbox; break;
default: Child = Home;
}
return (
<div>
<h1>App</h1>
<ul>
<li><a href="#/about">About</a></li>
<li><a href="#/inbox">Inbox</a></li>
</ul>
<Child/>
</div>
)
}
})
render(<App />, document.body)````
這是官方的例子，當(dāng)然席揽，寫法各種各樣顽馋，不過大同小異，歸根到底是通過操作history api 來達(dá)到目的幌羞。
## API
### Router
Router 是個總?cè)萜鞔缑眨脕戆心闼械穆酚伞?
#### props
##### children (required)
子組件，可以是Route属桦， 也可以是 PlainRoute熊痴，可以用嵌套的方式，也可以用Props的方式傳入聂宾。
##### routes
和children的作用一樣果善。
##### history
路由所監(jiān)聽的路由類型，可以是 hashHistory 或 browserHitstory系谐，前者是帶上#號以及hash形式的路由巾陕，后者跟普通URL相同。但是前者除了不雅觀之外不會帶來任何的副作用纪他，后者則會使得當(dāng)瀏覽器以當(dāng)前的URL向服務(wù)器請求頁面時鄙煤，服務(wù)器會返回404，因為前端設(shè)置的路由止喷，后端并沒有馆类。所以如果后端沒有做處理的話，只要刷新頁面之類的操作弹谁，就會報404乾巧。
##### createElement
當(dāng) route 準(zhǔn)備渲染 route 組件的一個分支時，就會用這個函數(shù)來創(chuàng)建 element预愤。當(dāng)你使用某種形式的數(shù)據(jù)進(jìn)行抽象時沟于，你可以想要獲取創(chuàng)建 element 的控制權(quán)，例如在這里設(shè)置組件監(jiān)聽 store 的變化植康，或者使用 props 為每個組件傳入一些應(yīng)用模塊旷太。
````javascript
<Router createElement={createElement} />
// 默認(rèn)行為
function createElement(Component, props) {
// 確保傳入了所有的 props！
return <Component {...props}/>
}
// 你可能會使用什么销睁，如 Relay
function createElement(Component, props) {
// 確保傳入了所有的 props供璧！
return <RelayContainer Component={Component} routerProps={props}/>
}
onError(error)
就是發(fā)生錯誤時觸發(fā)的回調(diào)。錯誤通常是從子組件上冒泡上來冻记。
onUpdate()
簡單來說就是路由切換時觸發(fā)的回調(diào)睡毒。
render(props)
3.0版本把 stringifyQuery(queryObject) 和 parseQueryString(queryString) 刪掉了，加了一個render函數(shù)冗栗。
<Link>
跳轉(zhuǎn)鏈接演顾，類似于普通的a標(biāo)簽供搀。
props
to
鏈接的指向，可以是個字符串或?qū)ο蟆?/p>
// String location descriptor.
<Link to="/hello">
Hello
</Link>
// Object location descriptor.
<Link to={{ pathname: '/hello', query: { name: 'ryan' } }}>
Hello
</Link>
// Function returning location descriptor.
<Link to={location => ({ ...location, query: { name: 'ryan' } })}>
Hello
</Link>
activeClassName
當(dāng)此鏈接為當(dāng)前路由時钠至，class的名稱葛虐。
activeStyle
同上，激活時的樣式
onClick(e)
就是個普通的事件處理函數(shù)棉钧，可以調(diào)用 e.preventDefault() 來阻止跳轉(zhuǎn)屿脐。
onlyActiveOnIndex
bool型，只有當(dāng)前路由為根路由時才為激活狀態(tài)掰盘。這是因為根路由可匹配任意路由摄悯，所以，不帶上這個機(jī)會一直處于激活狀態(tài)愧捕。
<IndexLink>
跟設(shè)置了 onlyActiveOnIndex 屬性為 true 的Link一樣奢驯。
