1

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>

Cristian Muscalu
  • 9,007
  • 12
  • 44
  • 76

0 Answers0