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

pjngdqdw 于 2023-01-30 发布在 React

关注(0)|答案(1)|浏览(104)

我正在使用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>

reactjs

来源：https://stackoverflow.com/questions/75268552/my-logo-also-get-underlined-while-using-activeclassname-attribute-in-react-js

1条答案

按热度按时间

ldioqlga1#

由于activeClassName是react-router-dom@5NavLink组件属性，因此您需要使用exact属性来指示您希望链接与当前URL路径*完全匹配。
exact
如果为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属性。您可能希望转换为使用RRDv 6属性来设置任何活动类名。
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处活动的链接，您可以用途：
一个二个一个一个

赞(0）回复(0）举报 2023-01-30

我来回答

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

1条答案

相关问题

热门标签

最新问答