使用history.block后，history.push无法正常工作

Question

当用户试图离开当前页面时，我试图显示一条消息，所以我像这样使用history.block：

    import { useHistory } from "react-router-dom";
    
    
    const ProfilerCreate = ({ pageType }) => {
    const history = useHistory();
    const [isDisabled, setIsDisabled] = useState(true);
    const [openModalUnsave, setOpenModalUnsave] = useState(false);
    
    useEffect(() => {
        history.block(validateChange);
     }, []
    );
    
    //Function to validate changes and open modal
      function validateChange(txt) {
        if (!isDisabled) {
          toggleModalUnsave();
          return false;
        }
      }

//Function to open or close modal
  function toggleModalUnsave() {
    setOpenModalUnsave(!openModalUnsave);
  }

//Function to return landing page
  function returnPage() {
    history.push("/");
  }
    
    return (
...
<div style={{ display: "none" }}>
        <Modal
          id="myModal"
          heading="You have unsaved changes"
          description="Do you want to save or discard them?"
          isOpen={openModalUnsave}
          onRequestClose={(detail) => toggleModalUnsave()}
          actionsRight={
            <>
              <Button display="text" onClick={() => returnPage()}>
                Discard
              </Button>
              <Button
                display="primary"
                onClick={(evt) => saveAudienceData(evt)}
              >
                Save and exit
              </Button>
            </>
          }
        >
          <p>Modal Children</p>
        </Modal>
      </div>
);
    
    export default ProfilerCreate;

当它检测到未保存的更改时，它会显示一个带有警告和两个按钮的模式，一个用于保存，另一个用于放弃，当用户点击放弃按钮时，它应该返回主页，但history.push不起作用。

我试图找到解决方案，或者我不知道我是否以错误的方式使用了history.block。

希望您能帮助我，谢谢！

Answer 1

我认为您遗漏了validateChange(txt)中的unblock()方法