如何从另一个页面导航到元素?

时间:2020-09-09 19:21:32

标签: javascript reactjs react-scroll

如何从另一个页面导航到某个元素?我已经用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>
    </>
  );
};

但是我没有取得太大的成功。最主要的是,当我在“ /”索引路径之外导航时,例如“ / contactus”,我丢失了对这些ID部分的引用,这使我 scroller.js:57目标元素未找到。 / p>

谢谢!

1 个答案:

答案 0 :(得分:0)

对于那些面临同样麻烦的人,我放弃了react-scroll,而是实现了react router hash链接。工作正常,这是他们的npm软件包网站-> https://www.npmjs.com/package/react-router-hash-link