如何在 React 中處理瀏覽器的“返回”按鈕？

Question

我現在有“react-dom-router v6.3.0”（嚴格來說。），我不明白如何處理瀏覽器的“后退”按鈕，例如我需要捕捉事件。 所以我可以打開用戶點擊返回后離開頁面的警告模式，至少給我一個方向。 請。

我正在使用 Typescript 4.4.2。

useBackListener：

import { useEffect, useContext } from "react";
import { NavigationType, UNSAFE_NavigationContext } from "react-router-dom";
import { History, Update } from "history";

const useBackListener = (callback: (...args: any) => void) => {
  const navigator = useContext(UNSAFE_NavigationContext).navigator as History;

  useEffect(() => {
    const listener = ({ location, action }: Update) => {
      console.log("listener", { location, action });
      if (action === NavigationType.Pop) {
        callback({ location, action });
      }
    };

    const unlisten = navigator.listen(listener);
    return unlisten;
  }, [callback, navigator]);
};

然后用法：

  useBackListener(({ location }) => {
    if (isDirty) {
      setOpenWarning(true)
    } else navigate("go back")
  })

單擊瀏覽器的“后退”按鈕后，如果表單很臟而不重定向，如何打開模式？ 另外，是否可以避免@ts-ignore？

Answer 1

您可以使用歷史 object 創建自己的自定義路由器，這將幫助您偵聽 react-router-dom v6 的“POP”等操作。

要創建自定義路由，您可能需要按照以下步驟操作： https://stackoverflow.com/a/70646548/13943685

Answer 2

  const blocker = useCallback((nv: any) => {
    setOpenWarning(true)
  }, [])

  useEffect(() => {
    if (!isDirty) return
    const unblock = navigation.block(nv => {
      const autoUnblocker = {
        ...nv,
        retry() {
          unblock()
          nv.retry()
        },
      }
      if (nv.action === 'POP') {
        blocker(autoUnblocker)
      } else {
        unblock()
        nv.retry()
      }
    })
  }, [isDirty])

這是需要的解決方案。 無論如何，感謝您的幫助。

Answer 3

這就是 React Router 的特定歷史 object 發揮作用的方式。 無論歷史操作是推送、彈出還是替換，它都提供了一種“偵聽 URL”更改的方法

 let history = createBrowserHistory();
history.listen(({ location, action }) => {
  // this is called whenever new locations come in
  // the action is POP, PUSH, or REPLACE
});

或者你也可以使用

window.addEventListener("popstate", () => {
  // URL changed!
});

但這僅在用戶單擊后退或前進按鈕時才會觸發。 當程序員調用 window.history.pushState 或 window.history.replaceState 時沒有事件。