I'm using react-scroll to scroll from the Nav to any preset anchor element.
I chose it because it also provides an active
class to the Nav items when element is in viewport.
This exmple works if i'm on the HomePage. But if i click the navbar item from another page it doesn't work.
I need to make the scrolling work from another page as well.
Need to mention that all the Anchor Elements are on the HomePage and using create-react-app
with v5 router
.
CODESANDBOX example
Github issue link
PS: If you know any better library that can do this and add active
class please post it here.
import { Element} from 'react-scroll';
export function HomePage() {
return (
<>
<title>Home</title>
<Banner />
<Element name="price-plan-list">
<PriceplanList />
</Element>
<Element name="entertainment-area">
<EntertainmentArea />
</Element>
</>
);
}
And this is the NavbarItem:
import { Link as AnchorLink } from 'react-scroll';
<NavItem key={index}>
<AnchorLink
activeClass="active"
to={item.link}
spy={true}
hashSpy={true}
duration={1000}
>
{item.title}
</AnchorLink>
</NavItem>