Navigating from another page

[muscaiu]

Is it possible to navigate from another page? (using react Router v5 with create-react-app)

For example i have this exmple that is working on the HomePage. But if i click the navbar item from another page it doesn't work.

How i navigate to anchor from another page?

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}
                smooth={'easeInOutCubic'}
                duration={1000}
                offset={-50}
            >
                {item.title}
            </AnchorLink>
        </NavItem>

[fisshy]

Have you tried setting the hashSpy={true} on the link?

Otherwise what you could do is on each Page, look for the "elementId" in the url, and then navigate to it programatically.

[muscaiu]

hashSpy={true} doesn't work.

How could i navigate programatically? I have the same Navbar for all pages. You mean to switch the AnchorLink for a react-router link?

[muscaiu]

I tried adding containerId={item.title} as mention in the docs:

hashSpy - update hash based on spy, containerId has to be set to scroll a specific element.

But i'm getting this error and don't know how to fix it:

Uncaught TypeError: Cannot read property 'spyCallbacks' of undefined
    at Object.addSpyHandler

I found this thread related, but still doesn't help: https://github.com/fisshy/react-scroll/issues/352

[muscaiu]

I made a Codasandbox to ilustrate the issue: https://codesandbox.io/s/scroll-link-example-forked-tk54l?file=/src/Home.js

I want to know if it's possible to navigate and scroll from another page or should i try another library.

Any help is appreciated. Thanks!

[fisshy]

Thanks for the codesandbox.

If you want to scroll to the elements on different pages, then you have to render the elements on every page. There's no way for react-scroll to detect elements that doesn't exists.

Easiest would be to wrap the elements in another component and render that component on each page.

[muscaiu]

I can't render the HomePage elements on every page.

Would it be possible to make a route switch to '/' before the scrolling happens?

[astridwalle]

Hi, I've found the package react-scrollable-anchor https://www.npmjs.com/package/react-scrollable-anchor really helpful. This allows to navigate and scroll to a specific section even from another page, just by using href anchor.

[MartinYounghoonKim]

@fisshy I have same issue. Do you have any sollutions ?

[fisshy]

@fisshy I have same issue. Do you have any sollutions ?

I do not have any solution to scroll between pages, this was made for SPA aps.

[AliF50]

I ran into the same issue.

[ManWithA1000Names]

I do not know if this will help you guys, but what I did (in create-react-app and react-router-dom) is to use a scroller.scrollTo in a setTimeout, example:

<Link 
onClick={()=>{
 setTimeout(()=> {scroller.scrollTo("id", {smooth: true, duration: 15000}}, 750)
}} 
to="/otherPage"
>Go to specific part in other Page</Link> 

I have a page transition hence the 750 milliseconds, but i have tried as low a 1 and it still worked. This solution is kind of jank and I dont know if Search engine bots will like it.

[Stvad]

People might find https://stackoverflow.com/questions/61779236/how-to-navigate-to-another-page-with-a-smooth-scroll-on-a-specific-id-with-react useful

[CWSites]

I set my page to link to the other page and pass a query string, for instance www.mydomain.com/#querystringhere

Then I evaluate what the hash is that is passed in on page load

const hash = window.location.hash;

  useEffect(() => {
    switch (hash) {
      case "#querystringhere":
        scroller.scrollTo("elementnamehere");
        break;
      default:
        break;
    }
  }, [hash]);

[adi-4444]

i have fount this issue as well but i have found a great package https://www.npmjs.com/package/react-router-hash-link it helped ...