Href на другую страницу React Gatsby

У меня есть меню со следующей ссылкой:

<li className="nav-item" key={link.name}>
 <a href={`page-2#second-section`}>{link.name}</a>
</li>

Но когда я нажимаю на нее, я попадаю на: http://localhost:8000/page-2/#second-section

но все же вверху страницы, а не в середине страницы, например, где находится div с идентификатором: «второй раздел».

Когда я снова нажимаю на нее, чтобы перейти в раздел, URL-адрес:

http://localhost:8000/page-2/page-2#second-section

Как я могу заставить это работать?

<div id="first-section">
   <hr></hr>
   <SEO title="Page one" />
</div>
<div id="second-section">
   <hr></hr>
   <SEO title="Page two" />
</div>

когда я делаю это напрямую:

<li className="nav-item" key={link.name}>
    <a href="#second-section">{link.name}</a>
</li>

это работает с той же страницы. Но это не работает с других страниц


reactjs javascript html jquery gatsby
person Link    schedule 24.11.2019    source источник
comment
Можете ли вы попробовать использовать <a href="/page-2#second-section">{link.name}</a> ?   -  person junwen-k    schedule 24.11.2019
comment
Не работает. Страница по-прежнему вверху вместо перехода к этому div   -  person Link    schedule 24.11.2019
comment
На самом деле это должно ответить на ваш вопрос stackoverflow .com/questions/48223566/   -  person junwen-k    schedule 24.11.2019
comment
Также вы должны использовать Link (импортировать его из gatsby) вместо обычного ‹a›   -  person antoine129    schedule 25.11.2019

Ответы (1)


arrow_upward
0
arrow_downward

для этого вида использования мы должны использовать Anchorlinks, более подробная информация доступна здесь https://www.gatsbyjs.org/packages/gatsby-plugin-anchor-links/

import { AnchorLink } from "gatsby-plugin-anchor-links";

export default () => (
  <AnchorLink to="/about#team" title="Our team">
    <span>Check out our team!</span>
  </AnchorLink>
);
// => <a href="/about#team" title="Our team"><span>Check out our team!</span></a>

export default () => (
  <AnchorLink to="/about#team" title="Check out our team!" />
);
// => <a href="/about#team" title="Check out our team!">Check out our team!</a>

export default () => (
  <AnchorLink
    to="/about#team"
    title="Check out our team!"
    className="stripped"
    stripHash
  />
);
// => <a href="/about" class="stripped" title="Check out our team!">Check out our team!</a>
// => Hash will be stripped, and a full page scroll will occure onRouteChange

export default () => <AnchorLink to="/about" title="About us" />;
// => <a href="/about" title="About us">About us</a>
person Sajith    schedule 06.08.2020