ReactRouter（github地址）是由 Ryan Florence 开发的, 它是一个针对 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有：
-
to为链接的名称 -
activeClassName为链接被激活的类名 -
activeStyle链接被激活时的样式 - ..
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 时：
当链接为 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'));
