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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!