ReactJS bootstrap button as a link (new tab)

Viewed 2347

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?

3 Answers

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.

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.

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

Related