activeStyle

Link组件区别于a标签的一个地方是，Link组件知道自己的路径是否是激活的状态，所以进行Style的配置。在App.js中修改代码，如下：

// modules/App.js
<li><Link to="/boys" activeStyle={{ color: 'red' }}>男神</Link></li>
<li><Link to="/girls" activeStyle={{ color: 'red' }}>女神</Link></li>

访问测试，你会发现，男神激活的时候，是红色的字体显示。

activeClassName

上面是用inline的方式进行修改的，当然也可以在CSS中进行格式的修改。

1.修改App.js中的属性

// modules/App.js
<li><Link to="/boys" activeClassName="active">男神</Link></li>
<li><Link to="/girls" activeClassName="active">女神</Link></li>

2.在index.htm中加入

<link rel=stylesheet href=index.css>

3.新建index.css，并加入：

.active {
  color: green;
}

打包运行，你会发现激活的某个路由，链接的文字会变成绿色。

Link包装器

其实一般情况下你的网站中大多数的链接都不需要知道自己是否被激活了，通常只是主导航的链接才需要。所以对主导航的Link进行包装是很有用的，这样你就不必记得哪些地方有activeClassName或activeStyle。所谓Link的包装器就是自定义的Link组件，通过自定义实现特别的Style。Link包装器的使用方式如下：

1.创建一个新的文件modules/NavLink.js，来自定义一个Link包装器，称为NavLink，当然可以是其他名字。内容为：

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return <Link {...this.props} activeClassName="active"/>
  }
})

2.在App中导入NavLink组件，并用它代替Link组件

// App.js
import NavLink from './NavLink'
// ...
<li><NavLink to="/boys">男神</NavLink></li>
<li><NavLink to="/girls">女神</NavLink></li>

以这样的方式，可以使用NavLink组件，也就是以后用到NavLink组件的时候，效果都是路由激活后，链接的文字变成绿色。当然你可以自定义你想要的Link的样式。