React Router Dom环境下如何强制重定向至外部URL

问题出在你传入的URL不是完整的带协议的绝对路径，浏览器会默认把它当成当前域名下的相对路径拼接；同时useNavigate是React Router专门处理内部路由的API，不适合外部跳转。以下是几种可行的解决方式：

• 直接使用原生window.location方法（推荐）
  外部URL跳转直接用浏览器原生的window.location.replace()或window.location.href，确保传入的是完整的带http/https协议的地址：

  // 登出逻辑中执行
  window.location.replace('https://www.google.com');
  

  这种方式会直接让浏览器跳转到目标外部域名，不会和当前应用的基准地址拼接。

• 确保环境变量中的URL是完整路径
  如果从环境配置文件读取跳转地址，一定要在配置里写全协议和域名：

  // .env 文件
  REACT_APP_LOGOUT_REDIRECT_URL=https://www.google.com
  

  然后在代码中直接使用：

  const logoutUrl = process.env.REACT_APP_LOGOUT_REDIRECT_URL;
  window.location.replace(logoutUrl);
  

• 添加URL协议校验补全（可选）
  如果你不确定配置的URL是否带协议，可以加个简单的校验逻辑自动补全：

  function handleLogoutRedirect(url) {
    // 检查URL是否包含http/https协议
    if (!/^https?:\/\//i.test(url)) {
      // 补全https协议
      url = `https://${url}`;
    }
    window.location.replace(url);
  }
  
  // 调用示例
  handleLogoutRedirect(process.env.REACT_APP_LOGOUT_REDIRECT_URL);
  

注意：useNavigate是React Router用于单页应用内部路由跳转的工具，它会自动基于应用的basename拼接路径，所以不要用它来跳转外部URL，这不是它的设计场景。

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