如何在React中将超链接设置为外部链接？

嘿，我完全懂你的困扰！当React项目里用了React Router时，它会默认拦截所有<a>标签的点击事件，把它们当作内部路由处理——这就是你指向外部faq.html的链接触发404的核心原因。不想用target="_blank"新开窗口的需求也很合理，下面给你几个可行的解决方案：

方案一：手动阻止路由拦截，触发外部跳转 #

给你的<a>标签添加onClick事件，先阻止React Router的默认拦截行为，再通过window.location.href直接跳转到外部链接，这样既不用新开窗口，也能绕过内部路由系统：

<a 
  href="https://example.com/faq.html" 
  onClick={(e) => {
    // 阻止React Router拦截点击事件
    e.preventDefault();
    // 直接跳转到外部链接
    window.location.href = e.target.href;
  }}
>
  FAQ
</a>

为什么<Route>不适合你的场景？ #

你提到的<Route>是React Router用来定义内部路由映射的组件，比如把/about这类路径对应到你的React组件。而你的faq.html是外部托管的独立静态文件，不属于React应用的内部路由体系，所以用<Route>根本解决不了这个问题，反而会让逻辑更混乱哦。

额外小提示：封装通用外部链接组件 #

如果你的项目里有很多外部链接，可以封装一个通用的ExternalLink组件，避免重复写逻辑：

function ExternalLink({ href, children }) {
  const handleClick = (e) => {
    e.preventDefault();
    window.location.href = href;
  };

  return <a href={href} onClick={handleClick}>{children}</a>;
}

// 使用方式
<ExternalLink href="https://example.com/faq.html">FAQ</ExternalLink>

这样后续所有外部链接都能复用这个组件，维护起来更方便～

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