Reactjs 当用户按下浏览器后退按钮时，如何防止@material ui/core/对话框关闭

从与上述版本一起安装的以下依赖项

“@emotion/react”：“^11.4.0”

@emotion/styled:“^11.3.0”

@material ui/core:“^5.0.0-alpha.35”

@material ui/图标“^5.0.0-alpha.35”

@material ui/lab:“^5.0.0-alpha.35”

从“React”导入React；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/DialogActions”导入DialogActions；
从“@material ui/core/DialogContent”导入DialogContent；
从“@material ui/core/DialogContentText”导入DialogContentText；
从“@material ui/core/DialogTitle”导入DialogTitle；
导出默认函数TestModal（）{
const[open，setOpen]=React.useState（false）；
常量handleClickOpen=（）=>{
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
返回(
打开警报对话框
{
如果（原因！='backdropClick'）{
handleClose（）；
}
}}
aria labelledby=“警报对话框标题”
aria descripeby=“警报对话框说明”
>
{“使用谷歌的定位服务吗？”}
让谷歌帮助应用程序确定位置。这意味着向用户发送匿名位置数据
谷歌，即使没有应用程序在运行。
不同意
同意
);
}

当您按“后退”键时，它不是会卸载吗？你的意思是，如果对话框打开，它总是会取消反按操作吗？实际上，我正在寻找一种解决方案，使对话框的行为类似于“disableEscapeKeyDown”道具。当用户单击“浏览器后退”按钮时，时间对话框仍处于打开状态。我相信有一些黑客的方法可以实现这一点，但你应该重新考虑这种方法。防止这种默认浏览器行为通常被认为是不好的用户体验，因为用户会期望某些行为，而你的应用程序会做其他事情。您可以将应用程序状态改为基于某些条件在所有（必需）路由上挂载打开的对话框。这是否是好的用户体验也应该考虑。@hotpink我同意你的说法，我会处理好用户体验。

import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

export default function TestModal () {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open alert dialog
      </Button>
      <Dialog
        disableEscapeKeyDown={true}
        open={open}
        onClose={(event, reason) => {
          if (reason !== 'backdropClick') {
            handleClose();
          }
        }}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{'Use Google\'s location service?'}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            Let Google help apps determine location. This means sending anonymous location data to
            Google, even when no apps are running.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Disagree
          </Button>
          <Button onClick={handleClose} color="primary" autoFocus>
            Agree
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}