0

我有这个用例：一个页面在一个hashrouter下有两个子页面

例如

domain.com/post/1
domain.com/post/1#details

在#details 哈希路由中，我想听“后退按钮点击”并在页面关闭之前进行一次 api 调用以更新帖子。

在此期间想要显示一个微调器，然后在完成 api 调用后让浏览器完成 window.history.back（后退按钮逻辑）

这可能吗，怎么做？

我现在正在尝试并取得部分成功。我正在使用React带有 NextJS 的框架，并且在一个组件中包含以下代码

    useEffect(() => {
        async function onPopState(e: PopStateEvent): Promise<void> {
            return new Promise((resolve) => handleWantToClose(resolve));
        }

        window.addEventListener('popstate', onPopState);
        return () => {
            window.removeEventListener('popstate', onPopState);
        };
    });

在上面的代码片段handleWantToClose中，单击返回导航浏览器按钮（或移动返回按钮 ios/android）时调用正常

问题是我不能延迟弹出状态。它不会等待承诺完成解决。

handleWantToClosefuncion 只是做一个 api 调用，然后调用 resolve 函数。

任何想法 ？这对于为移动用户提供出色的网站用户界面非常有用，尤其是那些back button经常浏览网站的用户。

我尝试过的其他事情

  e.preventDefault();
  e.stopPropagation();
  e.stopImmediatePropagation();

在我的 popstatelistener 上，然后在 api 调用完成后，手动触发 window.history.back() 但没有工作。

popstate 事件是不可取消的。

4

0 回答 0