Хеши не работают из-за задержки

Question

У меня есть домен, по которому я могу перейти следующим образом:

mydomain.com

, и страница загружается нормально. Оттуда я могу добавить хэши для доступа к частям страницы следующим образом:

mydomain.com#some_place

Это работает b. c. страница уже полностью загружена.

Однако, если я скопирую, вставьте в URL весь домен и наберите sh и нажмите Enter:

mydomain.com#some_place

Не будет go до some_place но просто загружается, как будто ха sh даже не было там.

Как я могу устранить неполадки дальше?

Answer 1

Вы можете получить га sh и затем прокрутить страницу до элемента, используя:

React.useEffect(() => {
    const url = window.location.hash
    const elem = document.getElementById(url)
    elem.scrollIntoView()
}, [])

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 2

Как только все ваши компоненты смонтированы, используйте встроенный метод жизненного цикла componentDidMount вместе с

  this.useScrollTo(element);

, где us this.useScrollTo определено ниже

  useScrollTo(element) {
    const elementPosition = element.getBoundingClientRect().top;
    const offsetPosition = elementPosition - 80;
    window.scrollTo({
      top: offsetPosition,
      behavior: "smooth"
    });
  }

Answer 3

В вашем хуке useEffect перенаправьте свою страницу на document.location.href, который является вашим URL-адресом с га sh.

Также document.location.hash дает вам ваш ха sh.

Изменить: Вот обновленное, проверенное решение:

  useEffect(() => {
    if (document.location.hash) {
      const hashElement = document.querySelector(document.location.hash);
      hashElement.scrollIntoView();
    }
  }, []);