react-router 是 React 最常用的路由庫，沒有之一，它除了功能比較欠缺，更新比較抽風(fēng)，隔代基本大改之外，嗯……沒有什么其他大缺點。

基本來說，你每更新一代就會發(fā)現(xià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 來達到目的。

## 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ù)進行抽象時，你可以想要獲取創(chuàng)建 element 的控制權(quán)，例如在這里設(shè)置組件監(jiān)聽 store 的變化，或者使用 props 為每個組件傳入一些應(yīng)用模塊。

````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)

就是發(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)。這是因為根路由可匹配任意路由，所以，不帶上這個機會一直處于激活狀態(tài)。

<IndexLink>

跟設(shè)置了 onlyActiveOnIndex 屬性為 true 的Link一樣。