React redux 應用程序全局運行一個函數

Question

我嘗試檢測瀏覽器或選項卡已關閉。 在整個大型應用程序中運行一個功能的最佳方式是什么？

window.onbeforeunload = function () {
    return "Do you want to close?";
};

Answer 1

你可以使用 react hook 並在你的 App.js 中實現它。我稱之為 useBeforeUnload :D

import { useEffect } from 'react'

const useBeforeUnload = (
  value: ((evt: BeforeUnloadEvent) => any) | string
) => {
  const handleBeforeunload = (evt: BeforeUnloadEvent) => {
    let returnValue
    if (typeof value === 'function') {
      returnValue = value(evt)
    } else {
      returnValue = value
    }
    if (returnValue) {
      evt.preventDefault()
      evt.returnValue = returnValue
    }
    return returnValue
  }

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

export default useBeforeUnload