React-router <Link> 没有活动 class

Question

我希望我的 <Link> 在匹配他们的路线时有一个 active class。目前生成的 <a> 标签不会改变，即使我在 link.

引用的路线上也是如此

我的 link 是这样创建的：<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

Answer 1

使用 activeClassName 属性指定 class 在 link 激活时添加。

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

Answer 2

我在使用 react-router-dom 4.2.2 版时遇到了类似的问题。我可以使用包含 activeClassName 道具的 NavLink 组件，而不是 Link 组件。

来自文档：

NavLink: A special version of the that will add styling attributes to the rendered element when it matches the current URL.

这是一个代码示例:

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

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

React-router <Link> 没有活动 class

React-router <Link> has no active class

react-router