javascript - react 路由器链接； activeClassName 不工作

Question

我有一个导航组件，它呈现每个导航链接。这个组件的返回看起来像这样:

     return (
        <li key={`nav-list-${el.title}-${index}`}>
          <Link to={{pathname: '/c/' + el.urlkey}}
                activeClassName={s.active}>{el.title}</Link>
          {subNav}
        </li>
      );

事件类仅在页面刷新时设置。单击链接时，事件指示器停留在初始链接处。

我没有使用 Redux，所以它似乎与这个问题无关:activeClassName does not work on the sideMenu when clicking on the link

我的路线是这样的:

      <Route path="/c/:category(/:title)" component={CategoryView} name="category" />

使用 React-Router 2.8.1 和 browserHistory

Answer 1

说明

1. 使用 <NavLink>而不是 <Link>并添加 exact 作为属性

2. 包括exact作为属性(property)确保activeClassName仅在与您的位置完全匹配的 url 路径上触发

例子

<NavLink exact activeClassName="active" to="/path1">
<NavLink exact activeClassName="active" to="/path2">

来源

https://reacttraining.com/react-router/web/api/NavLink/exact-bool

exact: bool

When true, the active class/style will only be applied if the location is matched exactly.