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

如果没有看到完整的代码，很难调试，但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>
或在所有onlyActiveOnIndex上使用Links属性：

<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 2

＆＃13;

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

＆＃13;

来自ReactTraining的

为我做了

Answer 3

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

import { withRouter } from 'react-router';

class NavBar extends Component {
    ...
}

export default withRouter(NavBar);

Answer 4

有两个解决方案：

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

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

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

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

window.open(`/insert/your/path/here/${variableName}`);

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

Link

Answer 7

说明

使用<NavLink>代替<Link>并添加完全相同的属性
将exact作为属性包含在内，以确保activeClassName仅在与您的位置完全匹配的网址路径上触发

示例

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

来源

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

确切：bool

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

反应路由器链接; activeClassName不起作用

7 个答案:

说明

示例

来源