将history.block与异步函数一起使用/回调/异步/等待

import { useHistory } from 'react-router-dom';

const MyComponent = () => {
  const history = useHistory();

  const handleSubmit = async () => {
    // 阻止页面跳转
    history.block((location, action) => {
      // 执行异步操作
      return new Promise((resolve, reject) => {
        // 异步操作完成后，根据结果决定是否允许页面跳转
        setTimeout(() => {
          const allow = true; // 根据异步操作结果决定是否允许跳转
          if (allow) {
            resolve(); // 允许页面跳转
          } else {
            reject(); // 不允许页面跳转
          }
        }, 2000);
      });
    });

    // 执行异步操作
    await someAsyncFunction();

    // 其他逻辑
    // ...
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单内容 */}
      <button type="submit">提交</button>
    </form>
  );
};