React Router

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

class App extends React.Component {
        render(){
             return (
                <div>
                    <ul >
                        <li><Link to='/about'>About</Link></li>
                        <li><Link to='/inbox'>Inbox</Link></li>
                    </ul>
                    {this.props.children}
                </div>
                )}})
//获取URL参数
class Message extends React.Component{
　　　　componentDidMount(){
　　　　　　const id = this.props.params.id     //来自于路径 ‘/inbox/messages/:id'
　　　　　　
　　　　　　fetchMessage(id,function(err,message){
　　　　　　　　this.setState({message:message})
　　　　　　})
　　}
　　render(){
　　　　return(
　　　　　　<div>
　　　　　　　　　　<h3>message｛this.props.params.id｝</h3>
　　　　　　</div>

}


React.render((
            <Router>
                <Route path='/' component={App}>
                        <Route path='about' component={About} />
                        <Route path='inbox' component={Inbox} onEnter={requireAuth}>
　　　　　　　　　　　　　　　　　　<Route path='messages/:id component={Message} />
　　　　　　　　　　　　　　</Route>

                </Route>
            <Router>
    ).document.body);

const CourseRoute = {
path:'cource/:id',

getChildRoutes(location,callback){
    require.ensure([],function(require){
        callback(null,[
            require('./routes/Announcements'),
            require('./routes/Assignments'),
            require('./routes/Grades'),
          ])})},

getIndexRoute(location,callback){
        require.ensure([],function(require){
            callback(null,require('./components/Index'))
        })}}

getComponents(location,callback){
        require.ensure([],function(require){
            callback(null,require('./components/Course'))})}}

import { Lifecycle } from 'react-router'

const Home = React.creactClass({

    //假设Home是一个 route 组件，使用 Lifecycle mixin 去获取一个 routerWillLeave 方法。

    mixins:[Lifecycle],
    
    routerWillLeave(nextLocation){
        if(!this.state.isSaved)
            return 'Your work is not saved! Are you sure leave?'
    },

    .....
})

import { Lifecycle, RouteContext } from 'react-router'

const Home  = React.creactClass ({

        //route 会被放在Home 和它子组件及孙子组件的context中，这样在层级树中Home及其所有子组件都可以拿到 route。

        mixin: [ RouteContext ],

        render(){
            return <NestedForm />
        } })

const NestedForm = React.creactClass({
         //后代组件使用Lifecycle mixin 获得 一个routerWillLeave 的方法。
        mixins:[Lifecycle],

        routerWillLeave(nextLocation){
            if(!this.state.isSave)
            return 'your work is not saved !'
        },
        ......
})

import { renderToString } from 'react-dom/server'
import { match,RoutingContext } from 'react-router'
import routes from './routes'

serve((req,res) => {

     //这里的req.url应该是从初识请求中获得的
    //完整的URL路径，包括查询字符串

    match({routes,location:req.url},{error,redirectLocation,renderProps) => {
    if(error){
        res.send(500,error.message)
        }else if (redirectLocation){
        res.redirect(302,redirectLocation.pathname + redirectLocation.search
        }else if (renderProps){
        res.send(200,renderToString(<RoutingContext {...renderProps}   //renderProps可以构建任何想要的形势
        }else{
        res.send(404,'Not found')
        }})})

let Invoice = React.creactClass({

    getInitialState(){
        return {
            invoice:null
        }
     },

    componentDidMount(){
        //初始化数据
        this.fetchInvoice()
    },

    componentDidUpdate(prevProps){
        //通过参数更新数据
        let oldId = prevProps.params.invoiceId
        let newId = this.props.params.invoiceId
        if (newId !== oldId)
            this.fetchInvoice()
        },

    componentWillUnmount(){
        //在组件移除前 忽略正在进行中的请求
        this.ignoreLastFetch = true
        },

    fetchInvoice(){
        let url = '/api/invoices/${this.props.params.invoiceId}
        this.request = fetch(url,(err,data) => {
            if (!this.ignoreLastFetch)
                this.setState({invoice:data.invoice})
            })
},

render(){
        return <InvoiceView invoice = {this.state.invoice}/>
        }
})

//main file 里renders a Router
import { Router,browserHistory } from 'react-router'
import routes from './app/routes'

render(<Router history={browserHistory} routers={routes} />.el)


//  a redux/flux action file:
import { browserHistory } from 'react-router'
browserHistory.push('/some/path')