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 (
      

        

          

            
Posts
            
About
          
        
        {this.props.children}
      
    );
  }
});

render((
  
    
      
      
    
  
), 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 (
      

        

          
haha
          
haha2
          
haha3
        
      
    );
  }
});

var About = React.createClass({
  render: function () {
    return (
      

        
about page
      
    );
  }
});

运行效果如下：

当链接为 posts 时：

posts

当链接为 about 时：

about

第二个栗子

Route 配置进阶。对于学习过angular的同学，这一部分很好理解。
在「文章页」中，点击每一篇文章，显示每篇文章的详情。

render((
  
    
      
        
      
      
    
  
), document.getElementById('content'));