如何使反应路由器链接处于活动状态 - JavaScript

React 路由器是 React 应用程序中用于管理多个页面（路由）的一种方式。当用户与您的应用程序交互时，路由器可以跳转到不同的页面或组件，以显示正确的内容。

在本篇文章中，我们将探讨如何使 React 路由器链接处于活动状态。在 React 路由器中，活动链接是指用户当前正在访问的页面链接。

在 React 路由器中使用 NavLink 组件

React 路由器提供了 NavLink 组件，该组件可帮助我们轻松地将活动类添加到当前链接。如果链接与用户当前正在访问的页面匹配，则 NavLink 组件将自动添加 active 类。

通过在 NavLink 组件上添加 activeClassName 属性，我们可以自定义活动类的名称。例如，在下面的代码中，我们将 active 类改为 current。

import { NavLink } from 'react-router-dom';

<NavLink to="/" activeClassName="current">Home</NavLink>

在这个例子中，如果用户当前正在访问主页，则 NavLink 组件将生成以下 HTML：

<a href="/" class="current">Home</a>

在 CSS 中添加活动类样式

如果你喜欢在 CSS 中处理样式，你可以使用 active 类来添加活动链接的样式。例如，在下面的代码中，我们将为活动链接设置文字颜色和背景颜色。

nav a.active {
  color: #fff;
  background-color: #000;
}

在这个例子中，当用户访问活动链接时，该链接将具有类名为 active 的 class。CSS 样式中的 nav a.active 将匹配具有 active 类的 a 元素，并将为该元素应用所选样式。

在 JavaScript 中添加活动类样式

在某些情况下，您可能需要使用 JavaScript 操作 DOM 元素来添加活动类样式。例如，如果您需要动态更改样式或处理其他事件。

我们可以使用 React 路由器提供的 withRouter 高阶组件来访问路由器信息。然后，我们可以使用 location 对象获取当前路由器链接的信息。

import React from 'react';
import { withRouter, NavLink } from 'react-router-dom';

class NavMenu extends React.Component {
  render() {
    const { location } = this.props;

    return (
      <nav>
        <ul>
          <li>
            <NavLink to="/" className={location.pathname === '/' ? 'active' : ''}>
              Home
            </NavLink>
          </li>
          <li>
            <NavLink to="/about" className={location.pathname === '/about' ? 'active' : ''}>
              About
            </NavLink>
          </li>
          <li>
            <NavLink to="/contact" className={location.pathname === '/contact' ? 'active' : ''}>
              Contact
            </NavLink>
          </li>
        </ul>
      </nav>
    );
  }
}

export default withRouter(NavMenu);

在这个例子中，我们使用 location.pathname 属性来检查当前路径是否与 NavLink 的 to 属性匹配。如果它们匹配，我们将 NavLink 的类设置为 active，否则我们将类设置为空字符串。

结论

在本篇文章中，我们介绍了如何在 React 路由器中使链接处于活动状态。我们学习了使用 NavLink 组件添加活动类，如何在 CSS 中添加活动类样式，以及如何在 JavaScript 中添加活动类样式。无论您选择哪种方法，都应该能够轻松地为您的 React 路由器链接添加活动状态。