React中a标签跳转异常：点击丢失URL参数无法跳转至目标地址

看起来你遇到的问题大概率是事件被拦截了——要么是React组件树里的父级事件阻止了默认行为，要么是Storybook环境自带的脚本拦截了外部跳转请求。结合你提到的直接调用window.open能正常工作，但放在点击事件里就失效的情况，我给你几个具体的排查和解决方向：

1. 检查是否有全局/父级事件拦截 #

先排查项目里有没有全局的点击事件监听（比如绑定在document、body或者某个高层父组件上），这些监听可能不小心调用了e.preventDefault()或者e.stopPropagation()，导致a标签的默认跳转逻辑被打断，window.open也受影响。

你可以在点击事件里加一行调试代码，看看默认行为是否被提前阻止：

<a 
  href={this.exitUrl} 
  target={this.target}
  onClick={(e) => {
    console.log('默认行为是否被阻止:', e.defaultPrevented); // 如果输出true，说明有拦截
  }}
>
  跳转按钮
</a>

如果确实被拦截了，试试在点击事件里先阻止事件冒泡，再手动触发跳转：

<a 
  href={this.exitUrl} 
  target={this.target}
  onClick={(e) => {
    e.stopPropagation(); // 阻止事件向上冒泡到父级
    e.nativeEvent.stopImmediatePropagation(); // 阻止当前元素上其他监听函数执行
    // 手动触发跳转，同时阻止a标签的默认行为避免冲突
    window.open(this.exitUrl, this.target);
    e.preventDefault();
  }}
>
  跳转按钮
</a>

2. 针对Storybook环境的特殊处理 #

你当前是在Storybook的iframe.html页面里，Storybook本身会监听iframe内的导航行为，用来维护selectedKind、selectedStory这些URL参数。很可能它的脚本拦截了外部跳转请求，只清空了参数而没有放行。

针对这种情况，除了上面的事件拦截处理，还可以试试：

• 强制使用_blank作为target（如果业务允许的话），有些环境对_self的跳转限制更严：

  <a href={this.exitUrl} target="_blank" rel="noopener noreferrer">跳转</a>
  

• 如果必须用_self，可以直接修改window.location.href代替window.open：

  <button onClick={() => {
    // 绕过可能的事件拦截，直接修改地址
    window.location.href = this.exitUrl;
  }}>
    跳转
  </button>
  

3. 排查事件绑定的语法错误 #

你提到的原生DOM绑定写法有问题：

anchor.onclick = window.open(this.exitUrl, this.target);

这里的window.open会立即执行，而不是点击时执行，应该改成函数形式：

anchor.onclick = () => window.open(this.exitUrl, this.target);

不过这种原生DOM绑定在React里不推荐，还是尽量用React的事件处理语法。

4. 调试工具辅助排查 #

用浏览器开发者工具的Elements面板，找到你的跳转元素，切换到Event Listeners标签，查看所有绑定的click事件。如果发现来自Storybook相关脚本的监听（比如开头带有sb-前缀的），可以暂时禁用它们测试，确认是不是这些脚本导致的拦截。

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