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>