React 路由离开页面前如何设置自定义弹框拦截？

2023-11-12 06:35:28

在 React 应用中巧妙拦截路由离开

在 React 应用中，有时候我们需要在用户离开页面之前，询问他们是否确定要离开。这通常是为了防止用户在未保存更改或未完成操作的情况下离开页面，从而导致数据丢失或操作中断。要实现此功能，我们可以使用 React 的官方路由库 react-router-dom 来设置路由离开页面的自定义弹框拦截。

安装和配置 react-router-dom

首先，我们需要安装 react-router-dom。我们可以使用以下命令安装它：

npm install react-router-dom

或者，我们也可以使用 yarn 来安装它：

yarn add react-router-dom

安装完成后，我们需要在项目中配置 react-router-dom。可以在项目根目录下的 index.js 文件中进行配置：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

// 其他组件和代码...

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Routes>
        {/* 这里放置路由规则... */}
      </Routes>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

创建自定义的离开页面弹框组件

接下来，我们需要创建一个自定义的离开页面弹框组件。这个组件将负责显示弹框并处理用户的选择。我们可以将它命名为 LeavePageDialog。

import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';

const LeavePageDialog = (props) => {
  const { open, onConfirm, onCancel } = props;

  return (
    <Dialog
      open={open}
      onClose={onCancel}
      aria-labelledby="leave-page-dialog-title"
      aria-describedby="leave-page-dialog-content"
    >
      <DialogTitle id="leave-page-dialog-title">离开页面</DialogTitle>
      <DialogContent id="leave-page-dialog-content">
        您确定要离开此页面吗？您尚未保存更改。
      </DialogContent>
      <DialogActions>
        <Button variant="outlined" onClick={onCancel}>取消</Button>
        <Button variant="contained" color="primary" onClick={onConfirm}>离开</Button>
      </DialogActions>
    </Dialog>
  );
};

export default LeavePageDialog;

使用 react-router-dom 的 useBeforeUnload 钩子

react-router-dom 提供了一个 useBeforeUnload 钩子，我们可以使用它来在用户离开页面之前触发某些操作。我们可以使用这个钩子来显示我们的自定义离开页面弹框。

import { useEffect, useState } from 'react';
import { useBeforeUnload } from 'react-router-dom';
import LeavePageDialog from './LeavePageDialog';

const App = () => {
  const [showLeavePageDialog, setShowLeavePageDialog] = useState(false);

  useBeforeUnload((event) => {
    if (/* 这里放置需要检查的条件... */) {
      event.preventDefault();
      setShowLeavePageDialog(true);
    }
  });

  const handleConfirmLeave = () => {
    setShowLeavePageDialog(false);
    // 这里放置离开页面的操作...
  };

  const handleCancelLeave = () => {
    setShowLeavePageDialog(false);
  };

  return (
    <div>
      {/* 这里放置应用内容... */}

      <LeavePageDialog
        open={showLeavePageDialog}
        onConfirm={handleConfirmLeave}
        onCancel={handleCancelLeave}
      />
    </div>
  );
};

export default App;