嵌套路由

有时会需要在每个页面上都显示App组件。如果没有React Router，就需要在每个页面上渲染App。这样的话，随着项目代码逐渐增多，代码冗杂现象就出现了。React Router跟Ember学了一个方法来共享UI，也就是嵌套路由。

很可能你需要的界面是：

也就是点击男神链接时，App组件还在被渲染，还能在界面上看到App组件。这可以通过把Boys和Girls路由嵌套在App路由中实现。因为这样的话，Boys路由就是App路由的子路由。记住一句话“子路由被激活时，其父路由也被激活”，所以Boys路由被激活时，App路由也是激活的状态，所以还在界面中显示。

代码改造

1.在index.js中，渲染Boys和Girls的路由要成为App的子路由。

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

2.在App中要渲染他的子组件，用{this.props.children}实现，换句通俗的话讲，就是在App中留个位置，用于显示子组件。如下所示：

// modules/App.js
// ...
  render() {
    return (
      <div>
        <h1>Ghettohub Issues</h1>
        <ul role="nav">
          <li><Link to="/boys">男神</Link></li>
          <li><Link to="/girls">女神</Link></li>
        </ul>

        {this.props.children}
      </div>
    )
  }
// ...

代码改造好了之后，打包运行。此时，虽然界面没有上图的整洁，但是已经到达了目的。现在来看，React Router组织界面的方式，特别像是大箱子套小箱子，对于男神和女神界面的组织方式如下：

就像搭积木一样，想要搭一个房子，可以先搭门、窗、墙等的小物体，最后把这些小物体组合起来就是一个房子。这就是React Router的思想：每条路由都可以是一个独立的小的应用，通过路由的配置将这小的应用组合起来，就是你所期待的大应用。就好比是大应用嵌套了小应用，特别像是大箱子套小箱子。