React离开路由时确认弹窗的前端实现方案

2023-09-15 16:30:40

前言

在单页应用中，路由是必不可少的，它允许用户在不同的页面之间进行无缝切换。然而，在某些情况下，我们需要在用户离开当前路由时弹出确认弹窗，以便提醒用户保存所做的修改或确认某些操作。React提供了路由守卫（route guards）这一机制，允许我们在路由切换时执行特定的逻辑，本文将介绍如何在React应用中使用路由守卫实现离开路由时的确认弹窗。

实现步骤

1. 安装React Router

首先，我们需要安装React Router。这是一个用于构建单页应用的路由库，它提供了丰富的功能，包括路由守卫。您可以通过以下命令安装React Router：

npm install react-router-dom

2. 创建路由守卫组件

接下来，我们需要创建一个路由守卫组件。路由守卫组件是一个React组件，它会在路由切换时被调用。我们可以使用React Router提供的useBeforeLeave钩子来实现路由守卫。以下是一个简单的路由守卫组件示例：

import React from 'react';
import { useBeforeLeave } from 'react-router-dom';

const LeaveRouteGuard = () => {
  const [isDirty, setIsDirty] = useState(false);

  useBeforeLeave(() => {
    if (isDirty) {
      return '您尚未保存更改，是否确定要离开此页面？';
    }
  });

  return <div>内容</div>;
};

export default LeaveRouteGuard;

在这个组件中，我们使用useState钩子来维护一个名为isDirty的状态，表示当前页面是否已被修改。当用户在页面上进行修改时，我们可以通过调用setIsDirty(true)来标记页面为已修改。当用户尝试离开路由时，useBeforeLeave钩子会被调用，如果isDirty为真，则会弹出确认弹窗。

3. 将路由守卫组件添加到路由配置中

现在，我们需要将路由守卫组件添加到路由配置中。我们可以通过在路由组件中使用<Route>组件来实现。以下是一个示例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import LeaveRouteGuard from './LeaveRouteGuard';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="*" component={LeaveRouteGuard} />
      </Switch>
    </Router>
  );
};

export default App;

在上面的代码中，我们首先定义了一个名为LeaveRouteGuard的路由守卫组件。然后，我们在<Switch>组件中定义了两个路由：/和/about。这两个路由都指定了具体的组件（Home和About），当用户访问这些路由时，相应的组件就会被渲染。最后，我们在<Switch>组件中添加了一个通配符路由（*），该路由匹配所有其他未定义的路由。我们将LeaveRouteGuard组件作为通配符路由的组件，这样，当用户尝试离开任何未定义的路由时，LeaveRouteGuard组件就会被渲染。

4. 样式和交互

为了让离开路由弹窗更加美观和易用，我们可以为其添加样式和交互效果。我们可以使用CSS来控制弹窗的外观，并使用JavaScript来实现交互逻辑。以下是一个简单的示例：

import React from 'react';
import { useBeforeLeave } from 'react-router-dom';

const LeaveRouteGuard = () => {
  const [isDirty, setIsDirty] = useState(false);

  useBeforeLeave(() => {
    if (isDirty) {
      return '您尚未保存更改，是否确定要离开此页面？';
    }
  });

  return (
    <div className="leave-route-guard-container">
      <div className="leave-route-guard-dialog">
        <div className="leave-route-guard-dialog-title">离开路由确认</div>
        <div className="leave-route-guard-dialog-content">您尚未保存更改，是否确定要离开此页面？</div>
        <div className="leave-route-guard-dialog-actions">
          <button className="leave-route-guard-dialog-button" onClick={() => { window.history.back(); }}>取消</button>
          <button className="leave-route-guard-dialog-button" onClick={() => { window.location.href = '/'; }}>离开</button>
        </div>
      </div>
    </div>
  );
};

export default LeaveRouteGuard;