ReactRouter（github地址）是由 Ryan Florence 開發(fā)的, 它是一個針對 React 而設計的路由解決方案、可以友好的幫你解決 React components 到 URL 之間的同步映射關系。

第一個栗子

一個頁面中有導航欄，導航欄里有「文章」、「關于」兩個菜單。
點擊「文章」顯示文章列表，鏈接變成 /posts；點擊 「關于」顯示關于板塊，鏈接變成/about。

首先我們引入必要的組件：

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';

然后我們聲明3個組件 App, Posts, About
組件App，也是項目的入口?？梢岳斫鉃槭俏覀冋麄€項目的layout，導航欄就在這里渲染

var App = React.createClass({
  render: function () {
    return (
      <div>
        <header>
          <ul>
            <li><Link to="/posts" activeClassName="active" activeStyle={{color: '#c00'}}>Posts</Link></li>
            <li><Link to="/about" activeClassName="active" activeStyle={{color: '#c00'}}>About</Link></li>
          </ul>
        </header>
        {this.props.children}
      </div>
    );
  }
});

render((
  <Router>
    <Route path="/" component={App}>
      <Route path="posts" component={Posts}/>
      <Route path="about" component={About}/>
    </Route>
  </Router>
), document.getElementById('content'));

Link為ReactRouter 的組件之一，替代 a標簽。它的prop有：

1. to為鏈接的名稱
2. activeClassName 為鏈接被激活的類名
3. activeStyle 鏈接被激活時的樣式
4. ..

Router 是react router 最核心的組件，讓你的路由和界面保持同步，它的prop 有：children、routes、 history 等等。其中routes也被稱為children，也就是接下來講的。

{this.props.children} ，這里的children即Router的prop， 指一個或多個Routes。當history改變的時候，Router將會匹配一個Routes的一個分支， 并且渲染它們配置的組件。子路由組件將嵌套在母路由組件里。

Route被用來為應用程序的組件層次結構聲明路由的匹配。path 即路由名稱，component即一個路由組件，當鏈接匹配到該路由時，該組件就會被渲染在父路由組件的this.props.children下

Posts 組件和About 組件：

var Posts = React.createClass({
  render: function () {
    return (
      <div>
        <ul>
          <li>haha</li>
          <li>haha2</li>
          <li>haha3</li>
        </ul>
      </div>
    );
  }
});

var About = React.createClass({
  render: function () {
    return (
      <div>
        <p>about page</p>
      </div>
    );
  }
});

運行效果如下：

當鏈接為 posts 時：

posts

當鏈接為 about 時：

about

第二個栗子

Route 配置進階。對于學習過angular的同學，這一部分很好理解。
在「文章頁」中，點擊每一篇文章，顯示每篇文章的詳情。

render((
  <Router>
    <Route path="/" component={App}>
      <Route path="posts" component={Posts}>
        <Route path=":id" component={Post}/>
      </Route>
      <Route path="about" component={About}/>
    </Route>
  </Router>
), document.getElementById('content'));