react-router 是 React 最常用的路由库，没有之一，它除了功能比较欠缺，更新比较抽风，隔代基本大改之外，嗯……没有什么其他大缺点。
基本来说，你每更新一代就会发现你以前写的代码基本都要大改，这是挺烦的一点，当然，官方会提供迁移的方案，但总归是令人挺不爽的。
简介
首先，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)````
这是官方的例子，当然，写法各种各样，不过大同小异，归根到底是通过操作history api 来达到目的。
## API
### Router
Router 是个总容器，用来包裹所有你所有的路由。
#### props
##### children (required)
子组件，可以是Route， 也可以是 PlainRoute，可以用嵌套的方式，也可以用Props的方式传入。
##### routes
和children的作用一样。
##### history
路由所监听的路由类型，可以是 hashHistory 或 browserHitstory，前者是带上#号以及hash形式的路由，后者跟普通URL相同。但是前者除了不雅观之外不会带来任何的副作用，后者则会使得当浏览器以当前的URL向服务器请求页面时，服务器会返回404，因为前端设置的路由，后端并没有。所以如果后端没有做处理的话，只要刷新页面之类的操作，就会报404。
##### createElement
当 route 准备渲染 route 组件的一个分支时，就会用这个函数来创建 element。当你使用某种形式的数据进行抽象时，你可以想要获取创建 element 的控制权，例如在这里设置组件监听 store 的变化，或者使用 props 为每个组件传入一些应用模块。
````javascript
<Router createElement={createElement} />
// 默认行为
function createElement(Component, props) {
// 确保传入了所有的 props！
return <Component {...props}/>
}
// 你可能会使用什么，如 Relay
function createElement(Component, props) {
// 确保传入了所有的 props！
return <RelayContainer Component={Component} routerProps={props}/>
}
onError(error)
就是发生错误时触发的回调。错误通常是从子组件上冒泡上来。
onUpdate()
简单来说就是路由切换时触发的回调。
render(props)
3.0版本把 stringifyQuery(queryObject) 和 parseQueryString(queryString) 删掉了，加了一个render函数。
<Link>
跳转链接，类似于普通的a标签。
props
to
链接的指向，可以是个字符串或对象。
// 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
当此链接为当前路由时，class的名称。
activeStyle
同上，激活时的样式
onClick(e)
就是个普通的事件处理函数，可以调用 e.preventDefault() 来阻止跳转。
onlyActiveOnIndex
bool型，只有当前路由为根路由时才为激活状态。这是因为根路由可匹配任意路由，所以，不带上这个机会一直处于激活状态。
<IndexLink>
跟设置了 onlyActiveOnIndex 属性为 true 的Link一样。
