React Router快速入门教程 互动版

二级嵌套

同学们也发现了上一节的分级,不是很合理啊。上一节中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>
// ...

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

紧跟本节的讲解,在右面进行相应的操作。