这几天因为项目需要，所以研究了一下react router这个东西，不得不说的是github是强大的，但是其中不免还是有些坑的，那么这些坑是在哪里呢，直接来看代码吧。。。。

首先既然我们用的是react，那么关于webpack的对于es6的那些配置我就不细说了，因此下面我们直接上es6的代码

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

首先我们导入react一些必要的工具包

然后我们先写一下首页的导航内容，这里为了区分被点击的链接，所以我加了一个ACTIVE的样式做区别

const ACTIVE = { color: 'red' }class App extends Component {    render() {        return (            
    
                     
     
APP!
                
     
                          
      
       
        /
       
                    
      
       
        /about
       
                    
      
       
        /inbox
       
                
     
                //这里是第一个坑点，在官方的github上并没有写这里的内容，                //而这里的 this.props.children是为了替换
                     //这样router就会帮我们找到这个children                {this.props.children}            
    
        )    }}

OK，别急，我们先把入口文件写完，上面我们把配置都做完了，接下来就是要引入，

let routes = (    
    
             
     
              
      
           )//这里是第二个坑点，看过官方github的朋友都知道，//在Router这个标签里面会有一个属性 history={browserHistory}//然而如果在这里加上了上面的这个属性之后，就会出现一个问题//在选择url的时候会工作正常，但是当refresh这个页面的时候//就会出现cannot get/...render((
       
        {routes}
       ), document.getElementById('app'))
      
     
    

好啦，入口文件我们已经完成了，那么接下来就要做组件内容了

这里我们为了更好区分组件与入口文件，所以将它们分在了不同的文件内，

那么这里我们就要先引入组件文件

import About from './compoment/about.jsx'import Inbox from './compoment/inbox.jsx'

ok,那么组件中我们就要这么来写了，以about为例

import React, {Component} from 'react';module.exports = class About extends Component {    render () {        return (            
                About            
        )    }};

好啦，react还是很强大的，而且很多用法也很骚，如果有不同意见的朋友我们可以好好交流，嘿嘿