为什么NavLink中的activeClassName属性在Reaction路由器的6.0.2版本中不起作用？ [英] why activeClassName property in NavLink is not working in 6.0.2 version of react router?

问题描述

当链接处于活动状态时，我使用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

interface NavLinkProps
  extends Omit<LinkProps, "className" | "style"> {
  caseSensitive?: boolean;
  className?:
    | string
    | ((props: { isActive: boolean }) => string);
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: {
        isActive: boolean;
      }) => React.CSSProperties);
}

您可以通过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版本中不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！