react router用法实例以及其中的一些坑

这几天因为项目需要，所以研究了一下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 (
            <div>
                <h1>APP!</h1>
                <ul>
                    <li><Link      to="/"           activeStyle={ACTIVE}>/</Link></li>
                    <li><Link      to="/about"      activeStyle={ACTIVE}>/about</Link></li>
                    <li><Link      to="/inbox"      activeStyle={ACTIVE}>/inbox</Link></li>
                </ul>
                //这里是第一个坑点，在官方的github上并没有写这里的内容，
                //而这里的 this.props.children是为了替换<Child/>
                //这样router就会帮我们找到这个children
                {this.props.children}
            </div>
        )
    }
}

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

let routes = (
    <Route path="/" component={App}>
        <Route path="/about" component={About}/>
        <Route path="/inbox" component={Inbox}/>
    </Route>
)
//这里是第二个坑点，看过官方github的朋友都知道，
//在Router这个标签里面会有一个属性 history={browserHistory}
//然而如果在这里加上了上面的这个属性之后，就会出现一个问题
//在选择url的时候会工作正常，但是当refresh这个页面的时候
//就会出现cannot get/...
render((<Router>{routes}</Router>), 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 (
            <h2>
                About
            </h2>
        )
    }
};

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