Open adriangiulianotucci opened 2 years ago
@adriangiulianotucci try to use custom link (genericHashLink)
@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>
@adriangiulianotucci try this
import {Link} from 'react-router-dom';
const MyHashLink = genericHashLink(Link);
<MyHashLink smooth activeClassName="active" to="/#work">
Button
</MyHashLink>
@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.
@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 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
Any updates on this? Having the same issue
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.
I have the same issue please resolve
Error:React does not recognize the isActive
prop on a DOM element.
it's annoying
I have encountered this issue in many other packages with identical code others having identical code have fixed this by changing isActive to $isActive
Hey guys I am struggling with the NavHashLink component. Im using something like this:
And I find two warnings in my console:
isActive
prop on a DOM element.activeClassName
prop on a DOM element.Can someone help me? Thanks!