react-router v1.0.0 入门

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有：

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'));