I have an external page with links that point back to my main react application using anchor tags. (ex: External page has a link to app/#platform).

I've been trying to find a way to make the page scroll to this anchor but have had no luck. The issue, I think, is that the anchors don't exist until the page renders.

When clicking links on the React App to the anchor tags -- everything works fine. The issue is in navigating from outside the React app.

I'm using React V18 and React Router V6.

My current best stab is in adding a useEffect that catches the hash and attempts to scroll. But it's not working either.

  useEffect(() => {

    const element = document.getElementById(location.hash);

    setTimeout(() => {
      window.scrollTo({
        behavior: element ? "smooth" : "auto",
        top: element ? element.offsetTop : 0
      });
     }, 100);
    }, [location]);