渲染Route

其实React Router的核心就是React的一个组件。如果在index.js中用下面的渲染语句，那么网页上啥也没有，直到我们配置了一条路由，才会有所显示。

render(<Router/>, document.getElementById('app'))

有同学会想到，如果我们在配置渲染App组件的路由，那么网页上应该也能看到“Hello, React Router!”才对。到底是不是这样，实践才是硬道理。请打开index.js，并且进行如下修改：

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

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

上面的代码中“// ...”表示省略了原来代码中不变动的部分。我们新导入了Router、Route、和hashHistory组件，并且不再直接渲染App组件，而改成了渲染一个Router。这个Router中只有一条路由，用于渲染App组件（见代码中component属性）。

对该项目重新打包运行

~/react-router-demo$ webpack  
~/react-router-demo$ node app.js

运行后，再次点击“访问测试”。你会发现网页没有变化，但是网页的URL会有所不同。还记得上一节的网址以“me.hubwiz.com”结尾，而现在的网页URL（网址）中增加了类似于“/#/?_k=koiqa2”的部分。这是因为我们使用了hashHistory组件，用于管理路由的历史。所以在URL中会有一个哈希值，用于记录浏览器的行为。

增加页面

创建两个组件，分别是Boys组件和Girls组件，分别写在modules/Boys.js和modules/Girls.js中，代码如下：

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

然后我们在index.js中就可以使用Boys组件和Girls组件了，就像使用App组件一样。将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 Girl from './modules/Girl'

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

注意，上面代码中我们导入了Boys组件和Girls组件，并且在Router中加入了两条新的路由：渲染Boys组件的路由和渲染Girls组件的路由（这里简称Boys路由和Girls路由）。现在总共有三条路由，注意path属性的区别。同学们可以猜到刚进入网页会显示App组件，因为它的路径为“/”。

现在，虽然有Boys页面和Girls页面了，但是还不能通过点击网页，直接进行页面的切换。这要通过下一节学习到的Link组件来实现。但是我们通过改变网址就可以访问到这两个网页了，例如把“/#/?_k=koiqa2”改为"/boys"，就可以看到“我是男神！”页面了。