React应用首次导航挂载组件时window.open报'Should not already be working'错误

原因分析 #

这是Firefox浏览器与React客户端路由结合时的专属bug，核心冲突点在于：当通过React内部导航（比如React Router跳转）访问从未挂载过的组件时，组件useEffect里的window.open调用时机刚好和Firefox的导航状态处理逻辑冲突，导致浏览器弹窗API抛出Uncaught Error: Should not already be working.异常。

不同场景无错误的原因：

• 刷新/直接URL访问：浏览器完整初始化页面，不存在客户端导航的状态冲突
• 再次访问组件：组件已被React缓存或完成过首次挂载，导航逻辑不再触发初始状态的冲突

可行解决方案 #

方案1：给弹窗操作加微小延迟

通过延迟window.open的调用时机，避开Firefox导航状态的冲突窗口，示例如下：

const sleep = milliseconds => new Promise(r => setTimeout(r, milliseconds));
const spawnWind = async () => {
    // 新增：延迟100ms再执行弹窗，避开导航冲突期
    await new Promise(resolve => setTimeout(resolve, 100));
    let newwin = window.open("about:blank", "TEST", "popup,height=260,width=370");
    await sleep(2000);
    newwin.close();
}

useEffect(() => {
    spawnWind()
    .then(() => console.log("After spawnWind"));        
}, []);

方案2：监听路由稳定后执行弹窗

如果使用React Router，可通过监听路由变化，确认导航完成后再触发弹窗逻辑，确保浏览器状态稳定：

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

// 组件内部
const location = useLocation();

useEffect(() => {
    const timer = setTimeout(() => {
        spawnWind().then(() => console.log("After spawnWind"));
    }, 100);
    
    return () => clearTimeout(timer);
}, [location.pathname]);

补充说明 #

这个bug目前属于React官方未解决问题，仅在Firefox环境下复现，Chromium系浏览器不受影响。

内容的提问来源于stack exchange，提问作者master_roby3