ReactJS bootstrap button as a link (new tab)

Question

I investigated a lot of topics about using button as a link but didn't found a solution for me - I need to open a certain page in a new tab using React bootstrap button.

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

React bootstrap offers a prop 'href' but no info how to open in new tab. Any suggestions, please?

Answer 1

You should use href and target together:

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

It looks like they just leave target with type any without further documentation. It just works the same way as the attribute that exists on the usual <a> tag does.

Answer 2

You could add the button inside the anchor tag

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

or

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

or..not really needed for you still a way would be

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

If onClickOpenVacancy was meant to do the redirection, then you don't need onClick function. the href and target are enough.

Answer 3

Pass in the complete URL in this code snippet and it should work

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

It's nothing specific to library like bootstrap, etc