渲染 Route

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

render((
    <Router history={hashHistory}>
        <Route path"/" compnent={App}/>
    </Router>
), document.getElementById('app'))

增加页面

modules/Boys.js

import React from 'react'
export default React.createClass({
    render(){
        return <div>我是男神！</div>
    }    
})

modules/Girls.js

import React from 'react'

export default React.createClass({
    render(){
        return <div>我是女神！</div>
    }    
})

使用 Route 组件导航

import React from 'react'
import {render} from 'react-dom'
import {Router,Route,hashHistory} from 'react-router'
import App from './modules/App'
import Boys from './modules/Boys'
import Girls from './modules/Girls'

render({
    <Router history={hashHistory}>
        <Route path='/' component={App} />
        <Route path='/boys' component={Boys} />
        <Route path='/girls' component={Girls} />
    </Router>
}, document.getElementById('app'))

使用 Link 进行跳转组件

modules/App.js

import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
    render(){
        return {
            <div>
                <h1>明星特区</h1>
                <ul role='nav'>
                    <li><Link to='boys' activeStyle={{ color: 'red'}}>男神</Link></li>                
                    <li><Link to='girls' activeClassName='active'>女神</Link></li>                
                </ul>
                {this.props.children}
            </div>
        }
    }
})

从 Link 到 NavLink

modules/NavLink.js

import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
    render(){
        return <Link {...this.props} activeClassName='active'/>
    }    
})

App.js

import NavLink from './NavLink'

<li><NavLink to='/boys'>男神</NavLink></li>
<li><NavLink to='/girls'>女神</NavLink></li>

URL 参数的传递

module/Boys.js

import React from 'react'
export default React.createClass({
    render() {
        return (
        <div>
            <h2>大家好，我是{this.props.params.boyName}！</h2>        
        </div>        
        )
    }
})

index.js

<Route path="/boys/:boyName" component={Boys}/>

修改 Link

<li><Link to="/boys/宋仲基">宋仲基</Link></li>

嵌套 Route

index.js

<Route path="/boys" component={Boys}>
  <Route path="/boys/:boyName" component={Boy}/>
</Route>

Boys.js

<div>
  <h2>我的男神们：</h2>
  <ul>
      <li><Link to="/boys/宋仲基">宋仲基</Link></li>
      <li><Link to="/boys/吴亦凡">吴亦凡</Link></li>
  </ul>
  {this.props.children}
</div>

App.js

import NavLink from './NavLink'
// ...
<li><NavLink to="/boys/宋仲基">宋仲基</NavLink></li>
<li><NavLink to="/boys/吴亦凡">吴亦凡</NavLink></li>
// ...

IndexRoute 首页默认路由

modules/Home.js

import React from 'react'
export default React.createClass({
    render(){
        return <div> 男生与女生 </div>
    }    
})

App.js

import Home from './Home'
// ......
<div>
    {this.props.children|| <Home/>}
</div>

index.js

// ...
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
import Home from './modules/Home'
// ...
render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="/boys" component={Boys}>
          <Route path="/boys/:boyName" component={Boy}/>
      </Route>
      <Route path="/girls" component={Girls}/>
    </Route>
  </Router>
), document.getElementById('app'))

IndexLink

import { IndexLink, Link } from 'react-router'
// ...
<li>
<IndexLink to='/' activeClassName='active'>Home</IndexLink>
</li>
// ...

不是当前组件子路由被激活，该路由才会显示

<li><Link to="/" activeClassName="active" onlyActiveOnIndex={true}>Home</Link></li>

使用 browserHistory

现代浏览器运行 JS 操作 URL 而不产生 HTTP 请求

// ...
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
 
render((
  <Router history={browserHistory}>
  //...
  </Router>
), document.getElementById('app'))

使用程序控制导航

import React from 'react'
import NavLink from './NavLink'
 
export default React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },
  // add this method
  handleSubmit(event) {
    event.preventDefault()
    const boyName = event.target.elements[0].value
    const path = `/repos/${boyName}`
    this.context.router.push(path)
    console.log(path)
  },
 
  render() {
    return (
      <div>
        <h2>我的男神们：</h2>
        <ul>
          <li><NavLink to="/boys/宋仲基">宋仲基</Link></li>
          <li><NavLink to="/boys/吴亦凡">吴亦凡</Link></li>
          <li>
            <form onSubmit={this.handleSubmit}>
              <input type="text" placeholder="boyName"/> / {' '}
              <button type="submit">Go</button>
            </form>
          </li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})