在React应用中，路由跳转是一个常见的操作。然而，在某些情况下，我们希望在用户离开当前页面之前进行一些确认操作，例如保存未提交的表单数据、提示用户是否确定离开等。为了实现这一功能，React Router提供了一些机制来在路由跳转前进行确认。本文将详细介绍如何在React中实现路由跳转前的确认功能。
计算
安全
数据库
网络和加速
企业服务
Prompt组件React Router提供了一个名为Prompt的组件，它可以在用户尝试离开当前页面时显示一个确认对话框。Prompt组件接受两个属性：
when: 一个布尔值，用于控制是否启用提示。message: 一个字符串或函数，用于设置提示消息。首先，我们需要在组件中导入Prompt组件：
import { Prompt } from 'react-router-dom';
然后，在组件的render方法中使用Prompt组件：
class MyComponent extends React.Component {
state = {
isBlocking: false,
};
handleInputChange = (e) => {
this.setState({
isBlocking: e.target.value.length > 0,
});
};
render() {
return (
<div>
<input type="text" onChange={this.handleInputChange} />
<Prompt
when={this.state.isBlocking}
message="您有未保存的更改，确定要离开吗？"
/>
</div>
);
}
}
在这个例子中，当用户在输入框中输入内容时，isBlocking状态会被设置为true，从而启用Prompt组件。当用户尝试离开当前页面时，浏览器会显示一个确认对话框，提示用户是否确定离开。
Prompt组件的message属性可以是一个函数，该函数接收一个location对象作为参数，并返回一个字符串或true。如果返回true，则允许导航；如果返回字符串，则显示该字符串作为提示消息。
<Prompt
when={this.state.isBlocking}
message={(location) => {
return `您确定要跳转到 ${location.pathname} 吗？`;
}}
/>
如果你想在某些情况下完全阻止导航，可以在message函数中返回false：
<Prompt
when={this.state.isBlocking}
message={() => false}
/>
这样，当isBlocking为true时，用户将无法离开当前页面。
useHistory钩子在函数组件中，我们可以使用useHistory钩子来实现类似的功能。useHistory钩子返回一个history对象，我们可以使用history.block方法来阻止导航。
首先，我们需要导入useHistory钩子：
import { useHistory } from 'react-router-dom';
然后，在函数组件中使用useHistory钩子：
function MyComponent() {
const history = useHistory();
const [isBlocking, setIsBlocking] = useState(false);
useEffect(() => {
const unblock = history.block((location) => {
if (isBlocking) {
return '您有未保存的更改，确定要离开吗？';
}
return true;
});
return () => {
unblock();
};
}, [isBlocking, history]);
const handleInputChange = (e) => {
setIsBlocking(e.target.value.length > 0);
};
return (
<div>
<input type="text" onChange={handleInputChange} />
</div>
);
}
在这个例子中，当isBlocking为true时，history.block方法会返回一个提示消息，阻止用户离开当前页面。
与Prompt组件类似，history.block方法也可以接受一个函数作为参数，该函数接收一个location对象，并返回一个字符串或true。
useEffect(() => {
const unblock = history.block((location) => {
if (isBlocking) {
return `您确定要跳转到 ${location.pathname} 吗？`;
}
return true;
});
return () => {
unblock();
};
}, [isBlocking, history]);
如果你想在某些情况下完全阻止导航，可以在history.block方法中返回false：
useEffect(() => {
const unblock = history.block(() => {
if (isBlocking) {
return false;
}
return true;
});
return () => {
unblock();
};
}, [isBlocking, history]);
useEffect和window.onbeforeunload除了使用React Router提供的机制外，我们还可以使用useEffect钩子和window.onbeforeunload事件来实现路由跳转前的确认功能。这种方法适用于需要在用户尝试关闭或刷新页面时进行确认的场景。
function MyComponent() {
const [isBlocking, setIsBlocking] = useState(false);
useEffect(() => {
const handleBeforeUnload = (e) => {
if (isBlocking) {
e.preventDefault();
e.returnValue = '您有未保存的更改，确定要离开吗？';
}
};
window.addEventListener('beforeunload', handleBeforeUnload);
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload);
};
}, [isBlocking]);
const handleInputChange = (e) => {
setIsBlocking(e.target.value.length > 0);
};
return (
<div>
<input type="text" onChange={handleInputChange} />
</div>
);
}
在这个例子中，当isBlocking为true时，window.onbeforeunload事件会触发，并显示一个确认对话框，提示用户是否确定离开。
window.onbeforeunload事件只在用户尝试关闭或刷新页面时触发，无法捕获通过React Router进行的路由跳转。e.returnValue的值可能不会显示在确认对话框中，而是显示浏览器默认的提示消息。下面是一个综合示例，展示了如何在React应用中结合使用Prompt组件、useHistory钩子和window.onbeforeunload事件来实现路由跳转前的确认功能。
import React, { useState, useEffect } from 'react';
import { Prompt, useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const [isBlocking, setIsBlocking] = useState(false);
useEffect(() => {
const unblock = history.block((location) => {
if (isBlocking) {
return '您有未保存的更改，确定要离开吗？';
}
return true;
});
return () => {
unblock();
};
}, [isBlocking, history]);
useEffect(() => {
const handleBeforeUnload = (e) => {
if (isBlocking) {
e.preventDefault();
e.returnValue = '您有未保存的更改，确定要离开吗？';
}
};
window.addEventListener('beforeunload', handleBeforeUnload);
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload);
};
}, [isBlocking]);
const handleInputChange = (e) => {
setIsBlocking(e.target.value.length > 0);
};
return (
<div>
<input type="text" onChange={handleInputChange} />
<Prompt
when={isBlocking}
message="您有未保存的更改，确定要离开吗？"
/>
</div>
);
}
export default MyComponent;
在这个示例中，我们同时使用了Prompt组件、useHistory钩子和window.onbeforeunload事件来确保在用户尝试离开页面时进行确认。无论是通过React Router进行路由跳转，还是通过关闭或刷新页面，用户都会收到相应的提示。
在React应用中实现路由跳转前的确认功能可以通过多种方式实现。Prompt组件是React Router提供的一个简单而强大的工具，适用于大多数场景。useHistory钩子提供了更灵活的控制方式，适用于需要在函数组件中动态控制导航的场景。window.onbeforeunload事件则适用于需要在用户关闭或刷新页面时进行确认的场景。
通过结合使用这些方法，我们可以为用户提供更好的体验，确保他们在离开页面之前不会丢失未保存的数据或操作。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
