NavHashLink使用问题：isActive属性报错与激活类异常

问题1：React不识别isActive属性的错误 #

你写错了两个属性名：

• activeclassName → 改为activeClassName（注意C大写）
• activestyle → 改为activeStyle（注意S大写）

拼写错误会让React把这些属性直接传递给DOM元素，而NavHashLink无法正确处理激活逻辑，进而抛出isActive相关的错误提示。

问题2：所有链接都被添加激活类的问题 #

默认的激活判定逻辑只匹配路径前缀，你的所有链接都基于根路径/，所以都会被判定为激活。需要自定义isActive方法，只当哈希部分完全匹配时才标记为激活：

修改后的完整代码示例 #

import React, { useState } from "react";
import { NavHashLink, HashLink } from "react-router-hash-link";

const Navbar = () => {
  const [displayMobileNav, setDisplayMobileNav] = useState(true);

  // 自定义激活判定函数，精确匹配哈希部分
  const isHashActive = (match, location) => {
    if (!match) return false;
    return location.hash === match.hash;
  };

  return (
    <div className="app__container-width nav__content">
      <HashLink
        onClick={() => setDisplayMobileNav(false)}
        className="logo"
        to="/#header"
      >
        <h1>K<span>B</span></h1>
      </HashLink>
      <div className="nav__content-links">
        <NavHashLink
          activeClassName="selected"
          activeStyle={{ fontSize: '10px' }}
          onClick={() => setDisplayMobileNav(false)}
          className="nav-links"
          to="/#about"
          isActive={isHashActive}
        >
          About
        </NavHashLink>
        <NavHashLink
          activeClassName="selected"
          onClick={() => setDisplayMobileNav(false)}
          className="nav-links"
          to="/#projects"
          isActive={isHashActive}
        >
          Projects
        </NavHashLink>
        <NavHashLink
          activeClassName="selected"
          onClick={() => setDisplayMobileNav(false)}
          className="nav-links"
          to="/#footer"
          isActive={isHashActive}
        >
          Contact
        </NavHashLink>
      </div>
    </div>
  );
};

export default Navbar;

关键说明 #

• 自定义isHashActive函数通过对比match和location的hash值，实现精确的激活判定。
• 所有NavHashLink必须使用正确的属性名，并传入自定义的isActive方法。

内容的提问来源于stack exchange，提问作者keanu.b