React Router学习笔记(1)

参考： 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 })
        })
    },
    // ...
})