shadcn-ui中Dialog组件路由跳转后点击失效问题解析

在使用shadcn-ui的Dialog或AlertDialog组件时，开发者可能会遇到一个典型问题：当在对话框操作中执行路由跳转（push/replace）后，新页面上的点击事件会失效。这个现象看似是对话框的遮罩层未被正确移除，但实际上涉及更深的组件状态管理机制。

问题现象重现

1. 创建一个受控对话框组件
2. 在对话框确认操作中编写逻辑：先关闭对话框，然后执行路由跳转
3. 跳转到新页面后，发现页面元素无法响应点击事件

技术原理分析

这种现象的根本原因在于对话框的关闭逻辑没有完全执行。虽然页面状态显示对话框已关闭，但组件的内部状态可能仍保持打开状态，导致：

• 虚拟DOM中的遮罩层元素仍然存在
• 事件冒泡被意外阻止
• 焦点仍停留在对话框内部元素

解决方案

正确的处理方式应该是：

1. 统一状态管理：确保对话框的关闭操作完全来自组件内部
2. 生命周期顺序：先完整执行对话框关闭动画，再执行路由跳转
3. 事件传播：检查是否在对话框事件处理中意外阻止了事件冒泡

示例修正代码结构：

// 在对话框组件内部处理关闭逻辑
const handleAccept = () => {
  onClose(); // 优先执行组件关闭回调
  router.push('/new-page'); // 然后执行路由跳转
};

最佳实践建议

1. 状态同步：确保父组件状态与子组件状态完全同步
2. 动画完成回调：利用Dialog的onOpenChange等回调确保动画完成
3. 调试技巧：使用浏览器开发者工具检查DOM中是否残留遮罩层元素
4. 组件隔离：避免在页面级状态中直接控制对话框开关

总结

这个案例很好地展示了React组件状态管理的微妙之处。在涉及动画组件与路由跳转的交互时，开发者需要特别注意生命周期执行顺序和状态同步问题。通过将控制逻辑完全交给对话框组件自身，可以避免这类"幽灵遮罩"问题的发生。

对于复杂交互场景，建议采用状态机模式管理组件状态，或者使用专业的动画库来处理组件卸载过程，确保视觉表现与逻辑状态完全一致。