那使用hooks如何实现呢

使用Hooks也可以实现组件卸载、路由跳转、页面关闭（刷新）之前进行提示。可以使用`useEffect`钩子函数来监听`beforeunload`事件，并在组件卸载时移除事件监听器。

以下是一个使用Hooks实现的示例代码：

import React, { useEffect } from 'react';

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

  const handleBeforeUnload = (e) => {
    e.preventDefault();
    e.returnValue = '';
  };

  return <div>My Component</div>;
}

在上面的代码中，我们使用`useEffect`钩子函数来监听`beforeunload`事件，并在组件卸载时移除事件监听器。在`handleBeforeUnload`函数中，我们阻止了默认的事件行为，并将`returnValue`属性设置为空字符串，这样浏览器在弹出确认框后会显示一个空白的消息。

需要注意的是，在使用Hooks时，我们需要将`useEffect`的第二个参数设置为空数组，以确保只在组件挂载的时候添加事件监听器，避免重复添加事件监听器。