React-router <Link> 没有活动类

Posted 2023-02-21

【中文标题】React-router <Link> 没有活动类

【英文标题】：React-router <Link> has no active class

【发布时间】：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

【参考方案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 组件中删除。