Javascript 反应路由器链路；activeClassName不工作

我有一个导航组件，它呈现每个导航链接。 此组件的返回如下所示：

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

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

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

返回(

{el.title}
{subNav}

);

活动类仅在页面刷新时设置。单击链接时，活动指示器保持在初始链接

我没有使用Redux，因此它似乎与此问题无关：

我的路线是这样的：

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

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

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

---

使用React Router 2.8.1和browserHistory进行调试时很难不看到完整的代码，但是React Router的问题通常可以通过以下方法解决：

• 确保您有一个

  IndexLink

  ：

  主页
  关于
  联系方式

• 或者在所有

  链接上使用
  onlyActiveOnIndex
  属性：
  
  主页
  关于
  联系方式
  

---

下面是第二种解决方案的工作演示：

有两种解决方案：

• 您可以升级到最新的稳定版本

  v3.0.0

  （已发布） 今天）此问题已解决。（见附件）
• 根据此答案为

  v2.8.1

  应用修复程序：

---

编辑：您没有使用Redux，因此第二个解决方案无法工作。

我还不想升级，因为它导致的问题比解决的问题还多。我没有使用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>
);

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

  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 = '';
  }

---

常见问题解答

我在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>

日志

也有同样的问题！通过使用路由器包装父组件来解决此问题。例如

import { withRouter } from 'react-router';

class NavBar extends Component {
    ...
}

export default withRouter(NavBar);

说明书

使用

而不是

，并添加exact作为属性

将

exact

包含为属性，以确保

activeClassName

仅在与您的位置完全匹配的url路径上触发

例子

来源

准确：布尔

如果为true，则仅当位置完全匹配时才会应用活动类/样式

---

我担心这与我正在循环组件这一事实有关。我尝试添加“onlyActiveOnIndex”，但遗憾的是没有效果。我也已经有了IndexLink，但它不在循环组件的范围内。不过谢谢你的帮助，你想到的任何东西都会很棒！有同样的问题，问题与具有activeClassName的组件不是我传递给它的组件这一事实有关，因此它不会被React更新。用Router将我的组件包装在里面就成功了！你有没有试着用而不是？@ArustamyanG。对我来说，你的解决方案是正确的。我看了这份报告，我，我不明白为什么它会起作用。你能解释一下吗？activeClassName=“selected”对我不起作用。它的工作原理是：activeClassName=“active”。我使用的是react router dom v4.3keep，请记住，如果出于任何延迟原因，您将对象传递到NavLink的“to”部分，如：to={{pathname:menu.goto，label:menu.label}}，那么您可能需要进行更多的检查。@adnantariq-为什么延迟传递对象？