React单页应用如何实现按钮/链接支持新标签打开且左键无刷新导航

现有写法的核心问题 #

• 给按钮绑定history.push的onClick事件、不设置href的写法：元素没有可被浏览器识别的目标地址，右键、中键操作时不会出现“在新标签页打开”的选项
• 直接给按钮加原生href的写法：左键点击会触发浏览器默认的整页跳转，导致整个应用重新加载，重复拉取静态资源，违背*单页应用（SPA）*的设计原则

官方标准实现 #

• 利用React Router DOM自带的路由组件适配能力，搭配Semantic UI React的元素替换属性实现，不需要手动重写浏览器交互逻辑
  1. 引入React Router中负责路由导航的Link组件
  2. 给Semantic UI的Button设置as={Link}属性，将原本渲染的button元素替换为Link组件，同时通过to属性指定目标路由路径
     示例代码：

  import { Link } from 'react-router-dom'
  import { Button } from 'semantic-ui-react'
  
  <Button 
    content='My Account'
    as={Link}
    to='/account'
  />
  

  这种写法的实际效果：

  最终渲染的元素完全保留Semantic UI Button的全部样式，同时自带真实可用的href地址：

  • 普通左键点击：React Router会自动拦截a标签的默认跳转行为，调用内部history逻辑完成无刷新导航，不会触发整页重载
  • 右键点击、中键点击、Ctrl/Cmd+组合键点击：完全保留浏览器原生交互，正常弹出“在新标签页打开”选项

需要插入自定义导航逻辑时的兼容写法 #

如果导航前需要做权限校验、埋点上报等额外处理，没法直接使用Link组件时，可以手动拦截默认行为，同时保留href属性兼容原生交互：

navigateToAccount(e) {
  // 仅拦截普通左键无修饰键的点击，其他操作全部走浏览器原生逻辑
  if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
  // 阻止默认的整页跳转
  e.preventDefault();
  history.push('/account');
}

<Button 
  content='My Account'
  href='/account'
  onClick={this.navigateToAccount}
/>

这种写法的核心逻辑是：

• 只有用户用普通左键、无修饰键点击时——也就是预期做应用内无刷新导航的场景，才阻止默认跳转，走内部history逻辑
• 其他所有操作场景（中键打开、右键唤起新标签菜单、带修饰键点击在新标签打开）都不做拦截，完全保留浏览器原生行为

常见注意事项 #

• 确保服务端配置了SPA路由回退规则，所有非静态资源的请求统一返回应用入口的index.html，否则新标签直接打开/account路径时，服务端会因找不到对应文件返回404
• 不要在带href属性的点击事件中做无差别的e.preventDefault()拦截，否则会彻底废掉新标签打开的原生能力

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