React Router 6自定义history阻塞在表单保存后未解除的问题求助

你的问题根源在于：当shouldBlock从true变为false时，没有调用之前history.block返回的unblock函数来解除阻塞，导致旧的阻塞逻辑依然生效。

可以通过以下方式修复：

1. 使用useRef保存unblock函数的引用，确保在shouldBlock变化时能访问到之前创建的解除函数
2. 在useEffect执行时，先解除旧的阻塞，再根据新的shouldBlock状态决定是否设置新阻塞
3. 组件卸载时自动解除阻塞，避免内存泄漏

修复后的代码示例：

import { useEffect, useRef } from 'react';

// 你的组件内部
const unblockRef = useRef(null);

useEffect(() => {
  // 先解除之前存在的阻塞
  if (unblockRef.current) {
    unblockRef.current();
    unblockRef.current = null;
  }

  // 如果需要阻塞，重新设置路由阻塞
  if (shouldBlock) {
    unblockRef.current = history.block(transition => {
      const url = transition.location.pathname;
      openPromptDialog(url, unblockRef.current);
    });
  }

  // 组件卸载时清理阻塞
  return () => {
    if (unblockRef.current) {
      unblockRef.current();
    }
  };
}, [shouldBlock]);

关键逻辑说明 #

• useRef保存unblock引用：保证在shouldBlock多次变化时，能获取到上一次设置的阻塞解除函数
• 每次shouldBlock变更先清旧阻塞：避免多个阻塞逻辑叠加，确保只有当前状态对应的阻塞生效
• 卸载时清理：防止组件销毁后仍残留路由阻塞逻辑，引发异常

内容的提问来源于stack exchange，提问作者marcus-linmarkson