二级嵌套

同学们也发现了上一节的分级，不是很合理啊。上一节中Boys和Boy是同一级的，都是App的子路由。这样做的后果是，当Boy激活时，Boys就不是激活的了，所以显示不了男神列表了。这一小节，我们讲解二级嵌套，将Boy路由变成Boys路由的子路由，这样Boy路由激活时，Boys路由也是激活的状态。三级甚至更多级的嵌套也同理。

1.在index.js更改代码，将Boy路由变成Boys路由的子路由,需要更改的部分如下：

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

2.我们需要在Boys中增加一个位置，用于显示Boy的信息。就像App中增加的{this.props.children}一样：

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

3.其实，我们对Boys同样可以使用Link包装器，使得Boys中的链接被激活时是绿色的。那么在Boys.js中，代码修改为：

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

打包运行，可以去点击访问测试，看下效果了。再说一次，子路由被激活时父路由也是被激活的状态。