IndexLink
你可以也发现了,我们的应用没有能够回到渲染Home组件的导航啊。就是说你点击App组件中的男神或者女神按钮后就不会再有链接回到Home组件了。我们可以在App组件中加入一个链接,链回到 / ,如下:
// in App.js
// ...
<li><NavLink to="/">Home</NavLink></li>
// ...
但是,这样做会有一个不可思议的情况发生。Home路由总是被激活的状态:你点男神链接的时候,Home链接和男神链接都是绿色的。正如我们之前所说的,当子路由被激活时,父路由也是被激活的。而不幸的是, /是所有路由的父路由。所以会出现上述情况。
但我们的目的是,只有当Home路由被激活时, /路由才被激活。实现这个目的,可以有两种方式。
利用IndexLink
在App.js中改用IndexLink组件,代码如下:
import { IndexLink, Link } from 'react-router'
// ...
<li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
//...
去测试一下,会发现问题就这么解决了。所以可以看到IndexLink的作用:只有当该路由而不是其子路由被激活时,改路由才是被激活的。换句话说,IndexLink突破了“子路由被激活时,父路由也是被激活的”的限制。
利用onlyActiveOnIndex属性
我们可以不用IndexLink组件,而是在Link组件中加入onlyActiveOnIndex属性的设置,来达到我们的目的。其实,IndexLink简单来说就是一个加入了onlyActiveOnIndex属性的Link包装器。所以在App.js中可以用:
<li><Link to="/" activeClassName="active" onlyActiveOnIndex={true}>Home</Link></li>
activeClassName已经包装在NavLink中了,所以我们还可以用NavLink组件来实现:
<li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>
紧跟本节的讲解,在右面进行相应的操作。