参考： https://react-guide.github.io/react-router-cn/docs/Introduction.html

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

const App = React.createClass({
    render() {
        return {
            <div>
                <h1>App</h1>
                <ul>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/inBox">InBox</Link></li>
                </ul>
                {this.props.children}
            </div>
        )
    }
})

React.render((
    <Router>
        <Route path="/" component={App}>
            <Route path="about" component={About} />
            <Route path="inBox" component={InBox} />
        </Route>
    </Router>
),document.body)

添加更多UI

const Message = React.createClass({
    render() {
        return <h3>Message</h3>
    }
})

const InBox = React.createClass({
    render() {
        return (
            <div>
                <h2>InBox</h2>
                {this.props.children || "Welcome to your InBox"}
            </div>
        )
    }
})

React.render((
    <Router>
        <Route path="/" component={App}>
            <Route path="about" component={About} />
            <Route path="index" component={Index}>
                <Route path="message/:id" component={Message} />
            </Route>
        </Route>
    </Router>
),document.body)

获取url参数this.props.params.id,this.props.location.query.bar

const Message = React.createClass({
    componentDidMount() {
        const id = this.props.params.id
        fetchMessage(id,function (err,message) {
            this.setState({ message: message })
        })
    },// ...
})