为什么 NavLink 中的 activeClassName 属性在 React Router 6.0.2 版本中不起作用？

Question

我使用 activeClassName 属性在链接处于活动状态时向链接添加一个新类。它在 React-router-dom 5.0.3 版本中运行良好。但在版本 6.0.2 中它开始向我显示警告并且它不起作用。我无法在react-router website 给出的文档中找到有关此更改的任何描述。

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

开发者控制台中显示的警告图像

Answer 1

RRDv6 中的APINavLink发生了一些变化，不再有activeClassNameprop。

导航链接

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);
}

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

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