如何重定向到外部 url onClick？在反应

Question

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

我有需要重定向到外部的卡片组件 url onClick。

所以我的问题是如何使用外部 url 示例在卡片组件上重定向 onClick：www.test.com 并提供 url 两个查询字符串 a=xxx 和 b=xxx

Answer 1

这是你需要的吗？

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

Answer 2

您可以使用动态查询字符串 template literals:

重定向到外部 URL

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

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

Answer 3

您也可以使用window.open()

参数

url: a string indicating the URL or path of the resource to be loaded. If an empty string ("") is specified or this parameter is omitted, a blank page is opened into the targeted browsing context.

target (optional): a string, without whitespace, specifying the name of the browsing context the resource is being loaded into. If the name doesn't identify an existing context, a new context is created and given the specified name. The special target keywords, _self, _blank, _parent, and _top, can also be used.

例子

单击卡片后，外部 link 将在新选项卡上打开。

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

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

如何重定向到外部 url onClick？在反应

How to redirect to external url onClick? in React

reactjs

typescript

redirect

react-router

external-url

参数

例子