React常用库(1)：react-router（1）

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一样。