ReactJS 引导按钮作为链接（新选项卡）答案

【问题标题】：ReactJS bootstrap button as a link (new tab)ReactJS 引导按钮作为链接（新选项卡）
【发布时间】：2021-09-21 20:56:58
【问题描述】：

我调查了很多关于使用按钮作为链接的主题，但没有找到适合我的解决方案 - 我需要使用 React 引导按钮在新选项卡中打开某个页面。

<Button onClick={() => onClickOpenVacancy(id)}>

React bootstrap offers a prop 'href' 但不知道如何在新标签中打开。有什么建议吗？

【问题讨论】：

标签： reactjs href react-bootstrap react-button

【解决方案1】：

你应该同时使用href和target：

<Button href="URL" target="_blank" onClick={() => onClickOpenVacancy(id)}>

看起来他们只是将target 留下any 类型而没有进一步的文档。它的作用与通常的 <a> 标签上的属性相同。

【讨论】：

【解决方案2】：

你可以在锚标签内添加按钮

 <a href='https://example.com/' target="_blank">
        <button className="test" onClick={() => onClickOpenVacancy(id)}>
            Click Here
        </button>
 </a>

或

   <button className="test" 
       onClick="window.location.href = 'https://example.com" target="_blank">
        Click Here
    </button>

或者..对你来说不是真正需要的仍然是一种方法

<form action="https://example.com/" target="_blank">
        <button className="test" type="submit" onClick={}> // onClick not needed
            Click Here
        </button>
    </form>

如果onClickOpenVacancy 是用来做重定向的，那么你就不需要 onClick 函数了。 href 和 target 就够了。

【讨论】：

在我的情况下，正确的代码是<Button target="_blank" href={onClickOpenVacancy(id)}> 当然这里不需要函数。 onClickOpenVacancy 只返回我的 URL 字符串

【解决方案3】：

在这段代码 sn-p 中传入完整的 URL，它应该可以工作

<Button onClick={() => window.open(URL, '_blank')}>ID</Button>

它与引导程序等库无关

【讨论】：