处理浏览器后退按钮

Question

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

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

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

我该如何处理？

我查看了 popstate 事件处理程序，但这不会阻止浏览器向后导航。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 后，它会重新加载不需要的页面。我该如何解决？

更新二：

我尝试了 history.pushState 方法，它按预期工作。谢谢。

更新三：

history.pushState 方法运行异常。 首次加载页面时，按下后退按钮关闭覆盖会导致页面重新加载。 但是，如果我重新加载页面一次，它就会开始正常工作。

Answer 1

尝试使用历史API中的

pushState

- 打开任何覆盖元素时。

然后你可以使用

popstate

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

Answer 2

你应该使用历史API。

history.pushState()

函数将状态添加到历史堆栈。所以当你按下后退按钮时，你会回到之前的状态。
这里的想法是每次打开工作表时添加一个新状态。并在不断变化的状态事件处理程序中关闭您的工作表。

举个例子：

// The changing state event handler
window.onpopstate = (event) => {
    // Do close the last sheet
}

// A generic function you call everytime a sheet is open
function onNewSheet() {
    history.pushState({sheet: 'open'}, "", "")
}

因此，如果你这样做，你自己的后退图标可以触发

history.back()

功能。

此外，如果需要，您可以在状态中存储信息（这里我只放了一个虚拟

{sheet: 'open'}

），可以用

history.state

检索。