首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

带有class='active‘的属性"aria-current='page'“即使在单击其他链接之后也不会从第一个NavLink中消失

带有class='active'属性"aria-current='page'"的NavLink是React Router中的一个组件,用于在导航栏中标记当前活动页面。当用户单击其他链接时,该活动页面的标记不会消失,仍然保持在导航栏中。

这个功能在网站或应用程序中非常有用,可以帮助用户清晰地知道他们当前所处的页面,提供更好的导航体验。

在React Router中,可以通过设置NavLink组件的属性来实现这个功能。具体的属性如下:

  • to:指定导航链接的目标路径。
  • exact:指定是否需要精确匹配目标路径。如果设置为true,则只有当目标路径与当前路径完全匹配时,才会被视为活动页面。
  • isActive:一个函数,用于自定义判断是否为活动页面的逻辑。如果返回true,则表示当前页面为活动页面。

以下是一个示例代码,展示了如何使用带有class='active'属性"aria-current='page'"的NavLink:

代码语言:txt
复制
import { NavLink } from 'react-router-dom';

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <NavLink exact to="/" activeClassName="active" aria-current="page">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink exact to="/about" activeClassName="active" aria-current="page">
            About
          </NavLink>
        </li>
        <li>
          <NavLink exact to="/contact" activeClassName="active" aria-current="page">
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;

在上述代码中,我们使用了NavLink组件,并设置了activeClassName属性为"active",aria-current属性为"page"。当当前页面与NavLink的目标路径匹配时,该NavLink会自动添加class为"active"的属性,并且设置aria-current属性为"page",从而实现了在活动页面上保持标记的效果。

腾讯云提供了一系列的云计算产品,其中与React Router类似的产品是腾讯云的Serverless Framework。Serverless Framework是一个开发框架,可以帮助开发者更轻松地构建、部署和管理无服务器应用程序。您可以通过以下链接了解更多关于腾讯云Serverless Framework的信息:腾讯云Serverless Framework

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

领券