打开新标签页时原标签页自动重载，如何避免？

问题原因 #

原标签页重载的核心原因是按钮触发了默认的页面跳转/表单提交行为——比如Button组件若处于表单内、或默认类型为submit，点击时会自动提交表单导致页面刷新。

解决方案 #

1. 阻止按钮默认点击行为

在onClick回调中接收事件参数并调用preventDefault()，阻断默认行为：

<Button
    title="Afficher l’original"
    onClick={(e) => {
        e.preventDefault(); // 阻止默认的表单提交/页面跳转
        openTabImage(imageSrcUrl);
    }}
>
    Afficher l’original
</Button>

2. 指定按钮类型为button（表单内场景必做）

如果Button是原生<button>的封装，显式设置type="button"，避免触发表单提交：

<Button
    type="button"
    title="Afficher l’original"
    onClick={() => openTabImage(imageSrcUrl)}
>
    Afficher l’original
</Button>

3. 优化openTabImage函数（可选）

直接将图片URL传入window.open，无需手动构建页面内容，更简洁可靠：

const openTabImage = (url: string) => {
    const newWindow = window.open(url, '_blank');
    if (!newWindow) {
        console.error("Failed to open a new tab.");
        return;
    }
    newWindow.opener = null; // 断开与原页面的关联，提升安全性
};

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