反应路由器链接； 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 包含为属性，以确保activeClassName 仅在与您的位置完全匹配的网址路径上触发

示例

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

来源

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

精确：布尔

当为 true 时，只有在位置完全匹配时才会应用活动的类/样式。

Answer 2

如果没有看到完整的代码就很难调试，但 React Router activeClassName 的问题通常可以通过以下任一方式解决：

• 确保您有一个IndexLink：

  <li><IndexLink to="/" activeClassName="active">Home</IndexLink></li> <li><Link to="/" activeClassName="active">About</Link></li> <li><Link to="/" activeClassName="active">Contact</Link></li>

• 或者在所有Links上使用onlyActiveOnIndex属性：

  <li><Link to="/" activeClassName="active" onlyActiveOnIndex>Home</Link></li> <li><Link to="/" activeClassName="active" onlyActiveOnIndex>About</Link></li> <li><Link to="/" activeClassName="active" onlyActiveOnIndex>Contact</Link></li>

这是第二个解决方案的工作演示：http://codepen.io/PiotrBerebecki/pen/qaKqRW

Answer 3

遇到同样的问题！通过withRouter包装父组件解决。例如

import { withRouter } from 'react-router';

class NavBar extends Component {
    ...
}

export default withRouter(NavBar);

Answer 4

<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

来自ReactTraining 为我做的

Answer 5

我还不想升级，因为它导致的问题多于解决的问题。而且我没有使用 Redux，所以整个连接的东西都不适用。我尝试渲染纯和非纯（使用纯渲染装饰器），但没有结果。

所以我决定手动编写链接处理。我知道它非常冗长，但它有效！

我添加了路由器上下文：

static contextTypes = {
   router: React.PropTypes.object
};

渲染返回：

return (
   <li key={`nav-${el.title}`} className={`${isActiveClass}`}>
     <a onClick={this.state.LinkClick} data-item={urlkey}>{el.title}</a>
   </li>
);

点击处理程序如下所示：

LinkClick(e){
   e.preventDefault();
   const elem = e.currentTarget;
   const item = elem.dataset.item;
   this.context.router.push('/c/'+item);
   this.setState({
     activeLink: item
   });
 }

最后我在渲染中设置了类：

  const activeLink = this.state.activeLink;
  let isActiveClass = '';
  let navLinks = map(availableCategories, (el, index) => {
  const urlkey = el.urlkey;

  // Check the active item on page render
  const isActive = this.context.router.isActive('/c/' + urlkey);

  if(activeLink === urlkey || isActive){
    isActiveClass = s.active;
  } else {
    isActiveClass = '';
  }

Answer 6

有两种解决方案：

• 您可以升级到最新的稳定版本v3.0.0（已发布 今天）解决了这个问题。 （见https://github.com/ReactTraining/react-router/issues/3286#issuecomment-220861601）
• 从此答案应用v2.8.1 的修复：https://stackoverflow.com/a/40126703

编辑：你没有使用 Redux，所以第二个解决方案不起作用。

Answer 7

我在 react-router-dom v4.3 中遇到了这个问题。并且我的整个应用程序已经使用 withRouter 进行了包装。我也在使用 react-redux。我注意到它会将类添加到正确的链接。

const mapStateToProps = (state) => {
return {
    router: state.router,
    location: state.route.location
 }
}
export default connect(mapStateToProps, mapDispatchToProps)(Header)

我的导航链接看起来像这样

 <NavLink
        exact
        to="/logs"
        className="menu-item"
        activeClassName="selected"
        >
        <i className="st-icon-log-reports" /> logs 
 </NavLink>