带有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：

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。