React导航点击激活所有按钮 如何实现仅激活点击项且默认激活首项

问题根因 #

• 你的代码中使用了全局的布尔类型状态isActive控制所有导航链接的激活状态，所有链接共用同一个状态判断规则，所以状态切换时所有链接都会同步添加/移除激活类
• 没有存储当前激活导航项的唯一标识，无法区分哪个链接应该被激活
• 状态初始值没有对应第一个导航项，无法实现默认第一个激活的需求

调整方案 #

将状态修改为存储当前激活导航项的索引（或路径、标题等唯一标识），初始值设为0对应第一个导航项，点击时仅更新为当前点击项的索引，激活类只匹配索引一致的链接。

修改后的完整代码如下：

import React, { useState } from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // 原代码漏了该导入，运行报错可补充
import styles from "./index.module.css";
import getNavigation from "../../utils/navigation";
import { Link } from "react-router-dom";
import logo from "../../images/europa-logo.png";

const Header = () => {
  const links = getNavigation();
  // 状态改为存激活项的索引，初始值0对应第一个导航项默认激活
  const [activeIndex, setActiveIndex] = useState(0);

  // 接收点击项的索引更新状态
  const toggleClass = (index) => {
    setActiveIndex(index);
  };

  return (
    <div>
      <nav className={styles.topnav}>
        <div className={styles.pageWrapper}>
          <img src={logo} alt="Logo" />

          <ul>
            {links.map((l, i) => (
              <li key={i}>
                <Link
                  // 只有当前遍历的索引和激活索引一致才加激活类
                  className={activeIndex === i ? "btn-active" : null}
                  // 点击时传入当前索引
                  onClick={() => toggleClass(i)}
                  to={l.link}
                  value={l.title}
                >
                  {l.title}
                </Link>
              </li>
            ))}

            <li>
              <div className={styles.social}>
                <a href="https://facebook.com">
                  <FontAwesomeIcon
                    size="2x"
                    icon={["fab", "facebook-square"]}
                  />
                </a>

                <a href="mailto:someone@mail.com">
                  <FontAwesomeIcon size="2x" icon="envelope" />
                </a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  );
};

export default Header;

可选优化 #

如果你使用的是react-router-dom v6，可以直接用自带的NavLink组件替换Link，它会自动根据当前页面路径匹配激活状态，不需要手动维护状态，刷新页面后激活状态也能自动和当前路由对齐。

内容的提问来源于stack exchange，提问作者Simba