在 react.js 中使用 activeClassName 属性时，我的徽标也带有下划线

Question

我正在使用activeClassName="active"来设置导航菜单项的样式，因此活动页面名称应该带有下划线。 唯一的问题是当用户在主页上时，徽标也会带有下划线/样式，而我希望导航菜单中的主页项目带有下划线或样式。

当我在活动页面上时，导航菜单中的每个页面名称都会设置样式，唯一的问题是当我在主页上时，徽标会设置样式，而我只想设置导航菜单中的“主页”项目的样式。

<nav className="navbar navbar-expand-lg bg-body-tertiary">
  <div className="container-fluid">
    <NavLink className="navbar-brand" to="/">Nomdev</NavLink>
    <button
      className="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
        <li className="nav-item">
          <NavLink
            activeClassName='active'
            className="nav-link"
            aria-current="page"
            to="/"
          >
            Home
          </NavLink>
        </li>
        <li className="nav-item">
          <NavLink
            activeClassName='active'
            className="nav-link"
            to="/service"
          >
            Service
          </NavLink>
        </li>
        <li className="nav-item">
          <NavLink
            activeClassName='active'
            className="nav-link"
            to="/about"
          >
            About
          </NavLink>
        </li>
        <li className="nav-item">
          <NavLink
            activeClassName='active'
            className="nav-link"
            to="/contact"
          >
            Contact
          </NavLink>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

由于activeClassName是一个react-router-dom@5 NavLink组件道具，您需要使用exact道具来指示您希望链接与当前 URL 路径完全匹配。

精确的

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

<NavLink className="navbar-brand" to="/" exact>Nomdev</NavLink>

...

<NavLink
  activeClassName='active'
  className="nav-link"
  aria-current="page"
  to="/"
  exact
>
  Home
</NavLink>

如果您碰巧正在使用react-router-dom@6并且出于某种原因仍然有activeClassName ，那么您将使用的道具是end道具。 您想要转换为使用 RRDv6 道具来设置任何活动的类名。

RRDv6 NavLink

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

...

如果使用了end道具，它将确保该组件在其后代路径匹配时不会被匹配为“活动”。 例如，要呈现仅在网站根目录而不是任何其他 URL 处处于活动状态的链接，您可以使用：

 <NavLink to="/" end> Home </NavLink>

<NavLink className="navbar-brand" to="/" end>Nomdev</NavLink>

...

<NavLink
  className={({ isActive }) => 
    ["nav-link", isActive ? "active" : null]
      .filter(Boolean)
      .join(" ")
  }
  aria-current="page"
  to="/"
  end
>
  Home
</NavLink>