在 React.js 中，如何在用户单击后退按钮时运行函数？

Question

我环顾四周，试图用 React router 找到一个解决方案。通过 V5，您可以使用<Promt />.
我还尝试寻找一个普通的 JavaScript 解决方案，但没有任何效果。

我使用 React router v6 并histroy替换为const navigate = useNavigation()没有.listen属性的 router。

此外，v6 没有<Promt />组件。

尽管如此，最后我还是使用了useEffectclear函数。但这适用于组件的所有更改。前进的时候也是如此。

根据react.js文档，“React在组件卸载时执行清理”。

 useEffect(() => {
    // If user clicks the back button run function
    return resetValues();;
  })

Answer 1

目前该组件Prompt（和usePrompt）useBlocker不受支持，react-router-dom@6但维护者似乎有意在将来重新引入它。

如果您只是想在发生后退导航（ POP 操作）时运行一个函数，那么一个可能的解决方案是使用导出的NavigationContext.

例子：

import { UNSAFE_NavigationContext } from "react-router-dom";

const useBackListener = (callback) => {
  const navigator = useContext(UNSAFE_NavigationContext).navigator;

  useEffect(() => {
    const listener = ({ location, action }) => {
      console.log("listener", { location, action });
      if (action === "POP") {
        callback({ location, action });
      }
    };

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

用法：

useBackListener(({ location }) =>
  console.log("Navigated Back", { location })
);

如果UNSAFE_NavigationContext您希望避免使用上下文，那么另一种方法是创建一个自定义路由，该路由可以使用自定义历史对象（即 fromcreateBrowserHistory）并使用普通的History.listen。详细信息请参阅我的回答。