IndexRoute

在我们的应用中，如果访问 / ,只会显示一个空白页。而我们的理想情况是先一个Home页，所以我们先建立一个Home组件，再去讲接下来怎么做。新建文件modules/Home.js并添加代码：

// modules/Home.js
import React from 'react'

export default React.createClass({
  render() {
    return <div>~~男神女神~~</div>
  }
})

一种方式是，先看App里面有子路由激活吗？如果没有，你们显示Home。这种方式，App.js的代码为：

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

这种方式也可以正常工作，但是我们更希望Home像Boys和Girls那样，绑定到一个路由上。这才更符合React Router的思想，一个组件绑定到一个路由上，通过路由的嵌套、激活等显示不同的界面。这种方式的实现要用到IndexRoute组件。只需改变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'))

上面代码的第2行，新引入了IndexRoute组件，第3行导入Home组件。在App路由中，加入了。打包运行，点击右侧的“访问测试”看下效果，进入网页后直接看到Home组件。

注意，IndexRoute组件没有path属性。IndexRoute只有当其父路由的所有其他子路由（IndexRoute的所有兄弟路由）都没有激活时，才是父路由的this.props.children，并显示出来。如果Boys路由激活了，那么Boys组件才是App的this.props.children，并显示出来。