如何跳转至外部URL而非将其追加到当前站点URL？

你遇到的问题是因为React Router的navigate（或useNavigate）是专门用于单页应用内部路由跳转的方法，它会把传入的URL当作相对路径处理，所以外部链接会被拼接到当前站点URL后面。

正确处理外部链接的方式： #

1. 使用原生浏览器API跳转

直接通过window.location.href跳转到外部链接，这是最直接的方式：

const navigateToItemWeb = () => {
  window.location.href = "https://superbalist.com/men/tops/shirts/relaxed-fit-short-sleeved-linen-blend-shirt-black/1185650";
};

如果需要在新标签页打开链接，改用window.open：

const navigateToItemWeb = () => {
  window.open("https://superbalist.com/men/tops/shirts/relaxed-fit-short-sleeved-linen-blend-shirt-black/1185650", "_blank");
};

2. 使用<a>标签（更符合HTML语义）

如果是在组件渲染内容中，直接使用原生<a>标签，同时添加rel="noopener noreferrer"提升安全性：

<a 
  href="https://superbalist.com/men/tops/shirts/relaxed-fit-short-sleeved-linen-blend-shirt-black/1185650"
  target="_blank"
  rel="noopener noreferrer"
>
  打开商品页面
</a>

关键提示 #

React Router的路由导航方法（navigate、useNavigate）仅适用于应用内部的路由路径（比如/home、/product/:id这类相对路径），不要用它们处理外部HTTP/HTTPS链接。

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