URL参数

大家都知道，URL是可以带参数的。通过URL中的参数，当前的页面可以将参数传递给下一个页面。

1.新建文件modules/Boy.js，内容为：

// modules/Boy.js
import React from 'react'
export default React.createClass({
  render() {
    return (
      <div>
        <h2>大家好，我是{this.props.params.boyName}，我爱你们~~</h2>
      </div>
    )
  }
})

注意，{this.props.params.boyName}是指要从上一个路由中得到boyName参数。

2.打开index.js，改为如下内容：

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'
import Boy from './modules/Boy'
render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="/boys" component={Boys}/>
      <Route path="/boys/:boyName" component={Boy}/>
      <Route path="/girls" component={Girls}/>
    </Route>
  </Router>
), document.getElementById('app'))

注意，是在App中添加一条路由，该路由与Boys和Girls是同一级的，现在整个项目有四条路由：App、Boys、Boy、Girls。Boys、Boy和Girls是App的子路由，所以App组件会一直渲染在网页上。

3.在Boys.js中，改为如下内容：

import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
  render() {
    return (
      <div>
        <h2>我的男神们：</h2>
        <ul>
          <li><Link to="/boys/宋仲基">宋仲基</Link></li>
          <li><Link to="/boys/吴亦凡">吴亦凡</Link></li>
        </ul>
      </div>
    )
  }
})

注意，这更改了Boys组件，使得Boys路由被激活时显示：我的男神们：宋仲基 吴亦凡。这样的字眼。点击宋仲基，由于to="/boys/宋仲基"，所以参数boyName就是“宋仲基”，切换到Boy路由被激活，并显示“大家好，我是宋仲基，我爱你们~~”

上面的例子，大家好好理解，在以后的编码中会经常用到。