使用react-router如何捕获页面销毁事件
时间: 2024-01-03 07:02:57 浏览: 33
在使用`react-router`时,我们可以使用`useEffect`钩子函数来捕获页面销毁事件。当用户从当前页面导航到其他页面时,`useEffect`钩子函数的清除函数将会被执行,我们可以在这个清除函数中触发页面销毁事件。
以下是一个示例代码:
```javascript
import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
useEffect(() => {
return () => {
console.log('Page will be destroyed');
// 触发页面销毁事件的代码
};
}, []);
const handleClick = () => {
history.push('/other-page');
};
return (
<div>
<button onClick={handleClick}>Go to Other Page</button>
</div>
);
}
```
在上面的代码中,我们使用`useEffect`钩子函数来监听页面销毁事件。当组件挂载时,我们添加了一个清除函数,这个清除函数将在组件卸载时被执行,从而触发页面销毁事件。在`handleClick`函数中,我们使用`history.push`方法导航到其他页面,这样就会触发页面销毁事件了。
需要注意的是,在使用`useEffect`钩子函数时,我们需要将第二个参数设置为空数组,以确保只在组件挂载时添加清除函数,避免重复添加清除函数。