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

Posted 2023-02-21

【中文标题】反应路由器链接； activeClassName 不起作用

【英文标题】：React router Link; activeClassName not working

【发布时间】：2017-03-06 05:01:03

【问题描述】：

我有一个导航组件，它呈现每个导航链接。 这个组件的返回是这样的：

     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

【问题讨论】：

有同样的问题，问题与具有 activeClassName 的组件不是我传递给 的组件有关，因此它没有被 React 更新。用Router 包裹我的组件就行了！

你试过用 代替 吗？

@ArustamyanG。对我来说，你的解决方案是正确的。我阅读了文档，reacttraining.com/react-router/web/api/withRouter 我，我不明白它为什么有效。你能解释一下吗？

【参考方案1】：

说明

使用<NavLink> 代替<Link> 并添加exact 作为属性

将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 时，只有在位置完全匹配时才会应用活动的类/样式。

【讨论】：

请记住，如果您出于某种迟钝的原因将对象传递给 NavLink 的“to”部分，如下所示：to=pathname:menu.goto, label:menu.label 那么你可能需要做更多的检查。

@adnantariq - 为什么传递物体会迟钝？

【参考方案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

【讨论】：

我担心这与我正在循环组件有关。我尝试添加 'onlyActiveOnIndex '，但遗憾的是无济于事。我也已经有一个 IndexLink 但它在循环组件之外。不过感谢您的帮助，您可能想到的其他任何东西都会很棒！

【参考方案3】：

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

import  withRouter  from 'react-router';

class NavBar extends Component 
    ...


export default withRouter(NavBar);

【参考方案4】：

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

来自ReactTraining 为我做的

【讨论】：

activeClassName="selected" 对我不起作用。它的作用是：activeClassName="active"。我正在使用 react-router-dom v4.3

【参考方案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 = '';
  

【参考方案6】：

有两种解决方案：

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

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

【参考方案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>