使用浏览器历史记录更新 React Hash 的正确方法

问题描述

从其中一个页面，我提供了这样的链接：

<Link to="/projects/united-kingdom#project2">Conversions</Link> 当用户点击时，我调用这个函数：

function hashScroll() {
    const { hash,origin,pathname } = window.location;
    window.history.pushState("","",origin + pathname); //replacing hash
    if (hash !== "") {
      setTimeout(() => {
        const id = hash.replace("#","");
        const element = document.getElementById(id);
        if (element) element.scrollIntoView();
      },0);
    }
}

所有这些都是有效的。问题是，一旦 id 恢复，我试图通过 window.history.pushState("",origin + pathname); 将它从位置 ( url ) 中删除。

但是当用户点击浏览器上的后退按钮时，我的页面不会返回上一个基页，而是返回到基于哈希的相同网址（同一页面 /projects/united-kingdom#project2）。

如何从历史记录中删除基于哈希的 url？所以当用户点击浏览器的后退按钮时，让它回到上一页 (/home) 而不是 hash 历史记录。

有人帮我正确的方法吗？

Live Demo

1. 转到https://tantum-pm.com/
2. 向下滚动到 What we do 块并点击任何链接
3. 在浏览器中按返回按钮

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）