React does not recognize the `isActive` prop on a DOM element

[adriangiulianotucci]

Hey guys I am struggling with the NavHashLink component. Im using something like this:

<NavHashLink smooth activeClassName="active" to="/#work">
     Button
</NavHashLink>

And I find two warnings in my console:

1. React does not recognize the isActive prop on a DOM element.
2. React does not recognize the activeClassName prop on a DOM element.

Can someone help me? Thanks!

[mqklin]

@adriangiulianotucci try to use custom link (genericHashLink)

[adriangiulianotucci]

@adriangiulianotucci try to use custom link (genericHashLink)

Hmmm nope I did this and the result is the same:

import { NavHashLink } from "react-router-hash-link";
import { genericHashLink } from "react-router-hash-link";

const MyHashLink = genericHashLink(NavHashLink);

<MyHashLink smooth activeClassName="active" to="/#work">
     Button
</MyHashLink>

[mqklin]

@adriangiulianotucci try this

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

const MyHashLink = genericHashLink(Link);

<MyHashLink smooth activeClassName="active" to="/#work">
     Button
</MyHashLink>

[adriangiulianotucci]

@adriangiulianotucci try this

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

const MyHashLink = genericHashLink(Link);

<MyHashLink smooth activeClassName="active" to="/#work">
     Button
</MyHashLink>

Yes, it does work but I lose the NavHashLink functionality such as activeClassName.

[mqklin]

@adriangiulianotucci seems like there is no same function for NavHashLink (genericNavHashLink), only for HashLink: https://github.com/rafgraph/react-router-hash-link#custom-link

[adriangiulianotucci]

@adriangiulianotucci seems like there is no same function for NavHashLink (genericNavHashLink), only for HashLink: https://github.com/rafgraph/react-router-hash-link#custom-link

Yep that's what I thought. I'll keep this open just in case. Thanks for your time

[sort72]

Any updates on this? Having the same issue

[anuragkanwar]

I made a workaround : I am using current location's hash to determine the current active HashNavLink

import { useLocation } from "react-router-dom";
import { NavHashLink } from "react-router-hash-link";

const Index = () => {
  const {hash} = useLocation();
  return (
    <div>
        //...
        <NavHashLink
            smooth={true}
            to={"#settings/profile"}
            className={`block px-2 py-3 rounded-lg ${hash === "#settings/profile" ? "bg-default" : ""}`}
          >
            Profile
          </NavHashLink>
         //...
         <div id={"settings/profile"}>Profile</div>
    </div>
  );
};
export default Index;

But the problem with this approach is, we are using active classes based on route which means every time user scrolls we still have active states on the navlink , so solution could be to use Intersection Observer also along with useLocation() to determine whether link should be active or not.

[krazykarthik2]

I have the same issue please resolve Error:React does not recognize the isActive prop on a DOM element. it's annoying

[krazykarthik2]

I have encountered this issue in many other packages with identical code others having identical code have fixed this by changing isActive to $isActive