Javascript beforeunload仅适用于页面刷新，不适用于页面离开

我正在使用

react admin

framework（3.2），当用户从

编辑表单

视图导航时，我正在尝试触发

beforeunload

事件。假设我的路径名是

“feed/123”

。当url以任何方式更改时（用户正在从编辑表单中导航），应触发

beforeunload

。 到目前为止，我已经尝试了以下代码：

const FeedEdit = props => {
    const alertUser = (e) =>
    {
        e.preventDefault();
        e.returnValue = '';
        console.log('fired'); //console.log is present on F5, not when leaving the page
    }

    useEffect(() =>
    {
        window.addEventListener('beforeunload', alertUser);
        return () => { window.removeEventListener('beforeunload', alertUser); };
    }, [])

    return <>
        <PageTitle type="edit" {...props} />
        <Edit {...props}>
          {/* other components */}
        </Edit>
    </>
};

const FeedEdit=props=>{
const alertUser=（e）=>
{
e、 预防默认值（）；
e、 返回值=“”；
console.log（'fired'）；//console.log出现在F5上，而不是离开页面时
}
useffect（（）=>
{
addEventListener（'beforeunload'，alertUser）；
return（）=>{window.removeEventListener（'beforeunload'，alertUser）；}；
}, [])
返回
{/*其他组件*/}
};

但是，这仅在刷新url时触发

beforeunload

事件。当导航离开表单时如何触发事件

---

提前谢谢你

是的，这是真的，因为当你离开页面时会触发卸载，但是当你用不同的内容替换url时，你仍然在同一页面中

您可以通过添加一个新的钩子来跟踪组件包装器中的位置更改：

  const location = useLocation();

  useEffect(() => {
    console.log('Location changed', location);
  }, [location]);

注意：你有很多选项可以帮助你在react路由器中，你也可以构建一个定制的钩子，在你想要的任何地方都可以重用跟踪代码…（如果你想为一个特定的路由组件处理它）

=================

更新1 这是一个用于处理卸载页面的自定义挂钩，我们可以通过在所需组件中调用它来使用它，如下所示：

  // When Un-load event is trigger then trigger dis-counect and remove local track
  const unload = useCallback(() => {
....
  }, []);

  // Add event lisiner to trigger before unload
  useUnload(unload);

=================

更新2 对于历史侦听器，您可以使用历史。侦听，例如：

  useEffect(() => {
    history.listen((loc, action) => {
      if(action === "POP"){// POP or PUSH
        window.location.reload();
      }
    });
  }, []);

---

好吧，如果我离开页面时事件会触发，那也没关系。但即使这样，事件也不会被触发。您需要继续卸载事件列表，我也会为它添加一个示例。。。现在回答，当离开页面时，卸载会触发，当你替换url时，位置会触发…不幸的是，你的解决方案仍然没有在页面上触发事件LEVEMM，这是一个真实项目的代码副本，我认为我们需要做一些跟踪，你能在卸载功能中放置一个控制台日志并检查它是否打印任何东西吗？还要确保执行操作时不需要承诺，因为在执行之前窗口会离开…刷新页面时会触发。但是，当我离开页面（goBack、goForward、其他url）时，它不会启动。我刚通过console.logging检查过

  useEffect(() => {
    history.listen((loc, action) => {
      if(action === "POP"){// POP or PUSH
        window.location.reload();
      }
    });
  }, []);