How to navigate to an element from another page?

Question

How can I navigate to an element from another page? I've tried this approach with react-scroll -->

import { Link } from "react-scroll";

const RightNav = ({ open, page }) => {

  return (


    <>

      <ul open={open}>
        <li> {page !== 'contactus' ? <Link to="benefits" smooth={true} delay={0} duration={400}>Benefícios</Link> : <Link to="/#benefits">Benefícios</Link>} </li>

        <li> {page !== 'contactus' ? <Link to="team" smooth={true}>Equipe</Link> : <Link to="/">Equipe</Link>} </li>
        <li> {page !== 'contactus' ? <Link to="location" smooth={true}>Localização</Link> : <a href="/#benefits">Localização</a>} </li>
        <li> {page !== 'contactus' ? <Link to="footer" smooth={true}>Contato</Link> : <a href="/#footer">Contato</a>} </li>
        <button>Entrar</button>
      </ul>
    </>
  );
};

But I didnt get much success. The main thing is that when I navigate outside the "/" index route, like "/contactus" I lost reference of those id sections and it throws me scroller.js:57 target Element not found.

Thanks!

Answer 1

For those who are facing the same trouble, I've give up on react-scroll and implemented react router hash link instead. Worked properly, here's their npm package website -> https://www.npmjs.com/package/react-router-hash-link