使用react-router进入页面时为什么也会触发
时间: 2024-03-06 11:49:27 浏览: 22
使用`react-router`进入页面时,也会触发`beforeunload`事件,这是因为`react-router`会重新加载页面,而重新加载页面会触发`beforeunload`事件。
通常情况下,我们希望在用户离开页面时才触发提示,而不是在进入页面时触发提示。为了避免在进入页面时触发提示,我们可以使用一个标志位来判断是否需要在页面离开时触发提示。
以下是一个示例代码:
```javascript
import React, { useState, useEffect } from 'react';
import { Prompt } from 'react-router-dom';
function MyComponent() {
const [isDirty, setIsDirty] = useState(false);
useEffect(() => {
window.addEventListener('beforeunload', handleBeforeUnload);
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload);
};
}, [isDirty]);
const handleBeforeUnload = (e) => {
if (isDirty) {
e.preventDefault();
e.returnValue = '';
}
};
const handleInputChange = (e) => {
setIsDirty(true);
};
return (
<div>
<Prompt
when={isDirty}
message="Are you sure you want to leave?"
/>
<input type="text" onChange={handleInputChange} />
<button onClick={() => setIsDirty(false)}>Save</button>
</div>
);
}
```
在上面的代码中,我们使用了`react-router`提供的`Prompt`组件来显示提示框。当用户在输入框中输入内容时,我们将`isDirty`标志位置为`true`,表示页面已经被修改过。在组件卸载时,如果`isDirty`为`true`,就会触发提示框。当用户点击保存按钮时,我们将`isDirty`标志位置为`false`,表示页面已经保存过,此时离开页面不会触发提示框。这样就可以避免在进入页面时触发提示框了。