react-router 跳转前确认Prompt使用

需求

页面切换的时候，会遇到这样的需求：切换时需要判断内容区域编辑后是否保存了， 若没保存，则弹出提示框，提示保存。

官网示例

react router中的Prompt可以实现这样的功能。
Prompt示例
Prompt文档

/** when:是否启用 */
/** message:string | func */

// 示例1
<Prompt
  when={
   formIsHalfFilledOut}
  message="Are you sure you want to leave?"
/>

// 示例2
<Prompt
  message={
   (location, action) => {
   
    if (action === 'POP') {
   
      console.log("Backing up...")
    }

    return location.pathname.startsWith("/app")
      ? true
      : `Are you sure you want to go to ${
     location.pathname}?`
  }}
/>

实现

我们项目的技术栈umi+antd+react
弹框用的Antd的 Modal.confirm

import React, {
    useEffect, useState } from 'react';
import {
    Modal } from 'antd';
import