React中ESC按键触发window.location.replace失效问题排查

ESC按键在浏览器中有默认行为（比如关闭原生模态框、中断页面加载等），当你触发ESC事件时，浏览器的默认动作可能会在window.location.replace()执行后干扰页面跳转流程，导致跳转被中断。另外，你的handleKeyDown函数标记了async但没有使用await，这种冗余的异步声明可能会引发事件处理的时序问题，间接影响跳转逻辑。

1. 阻止ESC的默认行为：在触发跳转逻辑前，调用e.preventDefault()和e.stopPropagation()，避免浏览器默认动作干扰跳转流程。
2. 移除不必要的async声明：handleKeyDown内没有异步操作，去掉async可以避免不必要的时序问题。
3. 强制触发浏览器跳转：如果跳转目标是当前页面路径，部分浏览器会忽略replace操作，可添加无意义的查询参数（如时间戳）强制触发页面重载。

useEffect(() => {
    window.addEventListener('keydown', handleKeyDown)

    return () => {
        window.removeEventListener('keydown', handleKeyDown)
    }
}, [])

const temp = () => {
    Cookies.remove('rurl', { domain: '.domain.io' })
    Cookies.remove('rurl')
    console.log(window.location.pathname)
    // 添加时间戳参数确保浏览器触发跳转
    window.location.replace(`${window.location.pathname}?t=${Date.now()}`)
    console.log(2)
}

const handleKeyDown = (e) => {
    if (e.keyCode !== 27) {
        return
    }
    // 阻止ESC的默认行为和事件传播
    e.preventDefault()
    e.stopPropagation()
    temp()
}

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