如何从另一个页面导航到一个元素?
How to navigate to an element from another page?
如何从另一个页面导航到某个元素?我已经用 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 target Element not found.
谢谢!
对于那些遇到同样问题的人,我放弃了 react-scroll 并改为实施 react router hash link。工作正常,这是他们的 npm 包网站 ->
https://www.npmjs.com/package/react-router-hash-link
如何从另一个页面导航到某个元素?我已经用 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 target Element not found.
谢谢!
对于那些遇到同样问题的人,我放弃了 react-scroll 并改为实施 react router hash link。工作正常,这是他们的 npm 包网站 -> https://www.npmjs.com/package/react-router-hash-link