如何在React中实现点击后重定向到外部URL？

Question

我正在使用react-router，这意味着我将路由存储在app.tsx文件中。

我有卡片组件需要在onClick时重定向到外部URL。

因此我的问题是如何使用外部URL（例如：www.test.com）并给该URL添加两个查询字符串a=xxx和b=xxx来重定向卡片组件上的onClick事件。

- Kate

---

这个回答能解决你的问题吗？ [React-Router外部链接] (https://dev59.com/G1gQ5IYBdhLWcg3wWCnP) - callmemath

谢谢，但我需要在我的外部URL中使用查询字符串，所以在这里我找不到它。 - Kate

Answer 1

你也可以使用 window.open()

Window 接口的 open() 方法将指定的资源加载到新的或现有的浏览上下文（即标签页、窗口或 iframe）中，并指定名称。

参数：

url：一个字符串，表示要加载的资源的 URL 或路径。如果指定空字符串（""）或省略此参数，则打开一个空白页到目标浏览上下文中。

target（可选）：一个字符串，没有空格，指定要加载资源的浏览上下文的名称。如果名称未标识现有的上下文，则创建一个新的上下文并给定指定的名称。还可以使用特殊的目标关键字 _self、_blank、_parent 和 _top。

示例

单击卡片后，外部链接将在新标签页中打开。

const url = 'https://www.test.com'

function Card(){
  return(
    <div 
      className='card-wrapper'
      onClick={() => window.open(url, '_blank')}  
    >
      <span>Some content here</span>
    </div>
  )
}

- Gass

Answer 2

您可以使用模板文字动态查询字符串重定向到外部网址：

const onClick = () => {
  location.href = `www.test.com/?a=${queryA}&b=${queryB}`
}

其中queryA和queryB是您动态注入的查询字符串

- Al Duncanson

Answer 3

location.href不能正常工作？

面对这个错误：

Unexpected use of 'location' no-restricted-globals

如果您正在使用React ^18，需要在location前添加window。

let url = 'https://www.external.url/'

<Button onClick={() => { window.location.href = url; } }>
   Click Here
</Button>

- GMKHussain

Answer 4

这是您需要的吗？

const onClick = () => {
    location.href = 'http://<location>/?a=1';
}

- Yoskutik