自定义 React 路由确认提示，告别单调体验

React 路由为我们提供了强大的导航控制能力，但其默认的导航确认提示却显得有些单调乏味。对于用户来说，这可能是一个令人沮丧的体验，尤其是当他们正在编辑重要数据或执行关键操作时。幸运的是，React 路由为我们提供了自定义此确认提示的灵活性，让我们能够根据自己的需求对其进行调整。

在本文中，我们将探讨如何使用 beforeunload 事件来自定义 React 路由的确认提示。beforeunload 事件会在用户离开页面时触发，为我们提供了一个拦截导航并显示自定义确认提示的机会。

理解 beforeunload 事件

beforeunload 事件是一个浏览器事件，当用户尝试离开页面时触发，例如点击链接、关闭窗口或刷新页面。该事件返回一个字符串，如果该字符串为非空字符串，则浏览器将阻止导航并显示该字符串作为确认提示。

自定义确认提示

要自定义 React 路由的确认提示，我们需要在 beforeunload 事件中返回一个非空字符串。我们可以使用 window.addEventListener 方法来监听 beforeunload 事件，如下所示：

window.addEventListener('beforeunload', (e) => {
  // 在此处自定义确认提示
});

在自定义提示时，我们可以使用 HTML 和 CSS 来创建更复杂的用户界面。例如，我们可以显示一个模态窗口，其中包含有关未保存更改或正在进行的操作的信息。

使用 React 路由的 onBeforeUnload 属性

React 路由还提供了 onBeforeUnload 属性，该属性允许我们指定一个函数来处理 beforeunload 事件。我们可以使用此属性来进一步简化自定义确认提示的流程。

import { BrowserRouter } from 'react-router-dom';

const App = () => {
  const onBeforeUnload = (e) => {
    // 在此处自定义确认提示
  };

  return (
    <BrowserRouter onBeforeUnload={onBeforeUnload}>
      {/* 路由组件 */}
    </BrowserRouter>
  );
};

通过使用 onBeforeUnload 属性，我们不必再手动添加 beforeunload 事件侦听器，从而简化了自定义确认提示的过程。

示例：阻止用户离开页面

以下是一个示例，演示了如何使用 beforeunload 事件阻止用户离开页面，直到他们确认已保存更改：

window.addEventListener('beforeunload', (e) => {
  if (!window.confirm('您有未保存的更改。确定要离开页面吗？')) {
    e.preventDefault();
  }
});

结论

通过自定义 React 路由的确认提示，我们可以提升用户交互体验，让他们在导航时更加自信和安心。通过使用 beforeunload 事件和 onBeforeUnload 属性，我们可以轻松创建符合我们特定需求的自定义提示。现在，当用户尝试离开页面时，他们将不再受到单调乏味的默认提示的困扰，而是会收到一个经过精心设计、信息丰富的确认提示，让他们的导航体验更加顺畅和愉快。