如何从React Router单页应用跳转至同主机下的其他应用或PDF

这个问题我之前做多SPA部署的时候也碰到过，核心原因就是React Router（你应该用的是这个React生态最常用的路由库吧）会默认拦截所有<a>标签的点击事件——它把所有同源路径的导航都当成前端路由来处理，哪怕你指向的是另一个SPA或者PDF文件，也不会让浏览器发起真实的HTTP请求，而是硬要在当前SPA的布局里找对应的路由组件（找不到就显示默认布局），这就是为什么点击后还是当前SPA的样子，刷新却能正常加载目标资源。

给你几个实用的解决方案，按推荐程度排序：

方案1：用原生JS跳转，直接绕过路由拦截 #

这是最简单可靠的办法，不用依赖<a>标签的默认导航行为，手动触发浏览器的原生跳转：

• 要是用按钮的话，直接写点击事件：

<button onClick={() => {
  // 当前窗口打开目标路径
  window.location.href = "/requirements";
  // 如果想替换当前历史记录（后退不会回到当前SPA），就用replace：
  // window.location.replace("/requirements");
}}>查看需求文档</button>

• 要是一定要用<a>标签，就得先阻止React Router的拦截，再手动跳转：

<a 
  href="/requirements" 
  onClick={(e) => {
    // 阻止React Router的默认拦截逻辑
    e.preventDefault();
    // 让浏览器自己处理这个跳转
    window.location.href = e.target.href;
  }}
>
  查看需求文档
</a>

方案2：配置React Router，排除特定路径的拦截 #

如果你不想每个链接都写点击事件，可以在全局层面让React Router放过特定路径：
比如在你的路由根组件里加一个全局点击监听，判断路径是否需要跳过前端路由：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handleLinkClick = (e) => {
      const linkElement = e.target.closest('a');
      if (!linkElement || !linkElement.href) return;

      // 定义需要跳过前端路由的路径（可以是前缀或具体路径）
      const excludedPaths = ['/requirements', '/downloads'];
      const targetPath = new URL(linkElement.href).pathname;

      // 如果是排除的路径，就不做拦截，让浏览器自己处理
      if (excludedPaths.some(path => targetPath.startsWith(path))) {
        return;
      }
      // 其他路径交给React Router处理
    };

    document.addEventListener('click', handleLinkClick);
    return () => document.removeEventListener('click', handleLinkClick);
  }, []);

  // ... 你的路由组件
}

这个方法要注意路径匹配的逻辑，别误判了正常的前端路由。

补充说明：关于你用的属性 #

• rel="external"：这个属性是给搜索引擎用的，告诉爬虫这是外部链接，对React Router的拦截逻辑完全没有影响，加不加都一样。
• target="_blank"：理论上打开新窗口应该能绕过当前SPA的路由（因为新窗口是独立的浏览器上下文），如果你用了这个还是有问题，试试清除浏览器缓存再测试，大概率是缓存导致的。

另外，你说刷新能正常显示，说明服务器端的配置是对的（服务器能正确返回目标SPA/PDF，而不是当前SPA的index.html），所以不用折腾服务器配置啦。

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