哈希值似乎是延迟的，所以不起作用

Question

我有一个可以按以下方式导航到的域：

mydomain.com

并且页面加载正常。从那里，我可以添加散列以访问页面的部分，如下所示：

mydomain.com#some_place

这似乎在公元前有效页面已完全加载。

但是如果我复制，将整个域粘贴并散列到URL中，然后按Enter键

mydomain.com#some_place

它不会转到some_place，而只是加载，就好像哈希还没有出现。

如何进一步排除故障？

Answer 1

一旦安装了所有组件，请使用内置的componentDidMount生命周期方法以及

  this.useScrollTo(element);

我们在下面定义this.useScrollTo的地方

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

Answer 2

您可以获取哈希值，然后使用以下方法将页面滚动到该元素：

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 3

在您的useEffect挂钩中，将页面重定向到document.location.href，这是带有哈希的URL。

也document.location.hash会给您您的哈希值。

编辑：这是一个经过测试的更新解决方案：

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