React-router <Link> 没有活动类答案

【问题标题】：React-router <Link> has no active classReact-router <Link> 没有活动类
【发布时间】：2016-05-11 21:57:33
【问题描述】：

我希望我的<Link>s 在匹配他们的路线时有一个active 课程。目前生成的<a> 标签不会改变，即使我在链接引用的路线上。

我的链接是这样创建的：<Link to="/status">STATUS</Link>

路线：

  <Router>
    <Route path='/' component={App}>
      <IndexRoute component={Status} />
      <Route path='about' component={About}/>
      <Route path='status' component={Status}/>
      <Route path='settings' component={Settings}/>
    </Route>
  </Router>

这个功能真的存在吗？如果是这样，我需要改变什么才能让它工作。

PS：我正在使用 react-router 和 redux-router。我也使用默认的 HashHistory，因为它是 nwjs-app

【问题讨论】：

标签： react-router

【解决方案1】：

使用activeClassName 属性指定链接处于活动状态时要添加的类。

<Link to="/status" activeClassName="active">STATUS</Link>

【讨论】：

根据 API，您应该是对的，但它仍然对我不起作用 -.- 如果更新有帮助，将尝试。
更新到 react-router 2.0.0-rc5 解决了这个问题，谢谢。
改用<NavLink />。

【解决方案2】：

react-router-dom 4.2.2 版也有类似的问题。而不是Link 组件，我可以使用包含activeClassName 属性的NavLink 组件。

来自文档：

NavLink：一个特殊版本，当它与当前 URL 匹配时，它将向呈现的元素添加样式属性。

这是一个代码示例：

<ul className="menu col-sm-12">
  <li><NavLink to={`/events`} activeClassName="current">Events</NavLink></li>
</ul>

注意：activeClassName 已从 React Router v4 (relevant answer) 的 Link 组件中删除。

【讨论】：