如何在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

您可以使用历史对象创建自己的自定义路由器，这将帮助您侦听诸如“react-router-dom v6”的“POP”之类的操作。

要创建自定义路线，您可能需要按照以下步骤操作：https://stackoverflow.com/a/70646548/13943685

Answer 2

使用 React Native、expo sdk 49 和 expo-router v2，将其放在我的客户个人资料页面上（首次注册）会阻止浏览器后退按钮对路线进行更改：

import { Platform } from 'react-native';

...

const [firstVisit, setFirstVisit] = useState(true);

...

  if(Platform.OS === 'web' && firstVisit) {
      history.pushState(null, '', location.href);
      window.onpopstate = function(e) {
          history.go(2);
      };
  } 

*firstVisit 变量不是必需的；我尝试向此配置添加警报，但它导致重新加载，从而产生身份验证错误； backHandler 同样适用于 android 和 ios，但不适用于 web。

Answer 3

这就是 React Router 特定历史对象发挥作用的方式。它提供了一种“监听 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 时，没有事件。