本文介绍了为什么NavLink中的activeClassName属性在Reaction路由器的6.0.2版本中不起作用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当链接处于活动状态时,我使用activeClassName属性将新类添加到该链接。它在Reaction-Router-Dom版本5.0.3中工作得很好。但在6.0.2版本中,它开始向我显示警告,但它不起作用。我在Reaction-Router网站上提供的文档中找不到有关此更改的任何描述。

 <NavLink
    className={classes.registerButton}
    activeClassName={classes.active}
    to="/auth/SignUp"
  >cart</NavLink>

image of the warning which was shown in the developer console

推荐答案

NavLink接口在RRDv6中稍有更改,不再有activeClassName道具。

NavLink

您可以通过className属性函数有条件地应用您的活动类。

<NavLink
  className={({ isActive }) => {
    const linkClasses = [classes.registerButton];
    if (isActive) linkClasses.push(classes.active);
    
    return linkClasses.join(" "); // returns "registerButton" or "registerButton active"
  }}
  to="/auth/SignUp"
>
  cart
</NavLink>

这篇关于为什么NavLink中的activeClassName属性在Reaction路由器的6.0.2版本中不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-13 00:25