处理浏览器后退按钮答案

【问题标题】：Handling browser back button处理浏览器后退按钮
【发布时间】：2023-02-23 18:37:23
【问题描述】：

我已经在 React 上构建了一个 PWA 移动应用程序。该应用程序是多页的，流程如下：首页 -> 搜索结果 -> 详细信息 -> 结帐。这里的路由由 NextJS 处理。

现在在每个页面上，单击一些按钮/图标会打开几个底页和子页面。这是通过在现有页面上覆盖一个工作表来处理的，并且不涉及 URL 更改。所有这些子页面/底页上都提供了后退/交叉图标，以关闭它们并导航回主页。

现在，我面临一个用户体验问题，大多数用户都在点击他们设备上的后退按钮，试图从子页面导航回来/关闭底页。这相当于点击浏览器上的后退按钮，导致 URL 更改，应用程序导航到上一页，而不是按预期关闭子页面/底页。

我该如何处理？

我查看了 popstate 事件处理程序，但这不会阻止浏览器导航 back.z

更新：

我做过这样的事情->

const openBottomsheet = () => {
  window.location.hash = "bottomsheet";
  //code to handle mounting the bottomsheet on DOM.
}

useEffect(() => {
addEventListener('popstate', (event) => globalDispatcher(hideBottomSheet()) );
    return () => {
      removeEventListener('popstate',(event) => globalDispatcher(hideBottomSheet()));
    }
})

此代码在打开底页时将 #bottomsheet 添加到 url 的末尾，单击后退时将删除哈希，因此它停留在同一页面上，并关闭底页。

但是，从 URL 中删除 #bottomsheet 后，它会重新加载不需要的页面。我该如何解决？

【问题讨论】：

标签： javascript reactjs browser

【解决方案1】：

尝试使用 History API 中的 pushState - 打开任何覆盖元素时。

然后你可以使用popstate事件来检查当某个覆盖元素打开时是否调用了返回，如果是，你可以使用一些代码来关闭这个覆盖元素。

【讨论】：