Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React does not recognize the isActive prop on a DOM element #102

Open
adriangiulianotucci opened this issue Aug 19, 2022 · 10 comments
Open

Comments

@adriangiulianotucci
Copy link

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
Copy link

mqklin commented Aug 22, 2022

@adriangiulianotucci try to use custom link (genericHashLink)

@adriangiulianotucci
Copy link
Author

@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
Copy link

mqklin commented Aug 23, 2022

@adriangiulianotucci try this

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

const MyHashLink = genericHashLink(Link);

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

@adriangiulianotucci
Copy link
Author

@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
Copy link

mqklin commented Aug 25, 2022

@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
Copy link
Author

@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
Copy link

sort72 commented Mar 24, 2023

Any updates on this? Having the same issue

@anuragkanwar
Copy link

anuragkanwar commented Aug 29, 2023

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
Copy link

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

@krazykarthik2
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants