Блог

Я использую компонент HashLink маршрутизатора React, хотя я не уверен, что это актуально.

У меня есть страница books/detail/12345 . На этой странице у меня есть <div id='availability-section'>

Если я нажимаю на любые ссылки, которые переходят на эту страницу, и ID ( href=...books/detail/12345#availability-section ) с target='_self' ним работает просто отлично.

Проблема в том:

1. Когда target='_blank' новая вкладка никогда не прокручивается вниз до availability-section div.
2. Кроме того, и это еще более неприятно: на моей странице есть раздел, в котором показаны связанные книги, и каждая из этих книг имеет ссылку на свою собственную страницу сведений… Если я включен books/detail/12345 и нажму на одну из этих ссылок <a href='...books/detail/54321#availability-section' target='_blank'>Book 54321</a> , откроется новая вкладка, а не прокрутка до #availability-section , и если я перейду на исходную вкладку … она перейдет к разделу доступности

Я в недоумении, почему это происходит. Это происходит в chrome / ff / safari / edge (я не тестирую другие)

Вы могли бы решить это без react-router

В компоненте Book в событии did mount вы должны проверить хэш ссылки, если он содержит раздел доступности, вы должны перейти к этому элементу

BookComponent

 componentDidMount(){
  if(window.location.hash.includes('availability-section')){
    const availabilitySectionNode = document.getElementById('availability-section')

    availabilitySectionNode 
    amp;amp; availabilitySectionNode.scrollIntoView({behavior: "smooth"});
  }
}
 

или с помощью перехватов

 useEffect(() => {
  if (window.location.hash.includes('availability-section')) {
    const availabilitySectionNode = document.getElementById('availability-section')

    availabilitySectionNode
    amp;amp; availabilitySectionNode.scrollIntoView({ behavior: 'smooth' })
  }
}, [])