React Router v5中history.push无法跳转外部URL的问题咨询

React Router（RR）是专门为单页应用内部路由导航设计的工具，它并不提供直接跳转外部网站的API。你当前使用window.location.replace(EXTERNALSITE)的写法是完全合理的，不需要强行用React Router实现外部跳转。

为什么history.push无法跳转外部网站？ #

history.push的逻辑是基于当前应用的基础URL（比如你的http://localhost:8080）拼接路径，传入外部地址时会被当作相对路径处理，因此才会出现http://localhost:8080/EXTERNALSITE这种错误的跳转地址。

外部跳转的正确做法 #

外部网站跳转依然需要使用浏览器原生的window.location相关API，同时注意以下两点：

• 确保EXTERNALSITE是完整的URL，必须包含http://或https://前缀，避免浏览器解析为相对路径。
• 若需要保留当前页面的历史记录（而非替换），可以用window.location.href = EXTERNALSITE替代replace。

优化后的代码示例 #

const handleButtonClick = () => {
  if (foo) {
    // 外部跳转依赖浏览器原生API，RR不支持此类场景
    window.location.replace(EXTERNALSITE); 
  } else if (userToken) {
    // 内部路由正常使用RR的history.push
    history.push('/home'); 
  } else {
    logout();
  }
};

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