React history.push allow user to open in new tab

Question

Navigation between pages in my navbar is done using an onClick handler, rather than through hrefs. When doing this, I can't either middle click to open in a new tab or right click on the link and select open in new tab. I am using react-router-v4.

An example of a route.

<a onClick={() => this.props.history.push('/conference/')}>Conference</a>

Is there a way to allow this to happen in react or should I be using hrefs instead?

score 6 · Accepted Answer · answered Jun 16 '18 at 17:55

6

You can use <Link to='/conference'>Conference</Link> to do this.

answered Jun 16 '18 at 17:55

Rohith Murali

5,551
2
25
26

score 3 · Answer 2 · edited Mar 29 '20 at 08:39

3

You should use Link from react router

<Link to={`/conference`}>Conference</Link>

edited Mar 29 '20 at 08:39

Omar Mneimneh

456
5
14

answered Jun 16 '18 at 17:51

nishant

2,526
1
13
19

score 0 · Answer 3 · answered Jun 16 '18 at 17:50

0

Is there a reason you're not using the Link component?

answered Jun 16 '18 at 17:50

topic

372
2
12

score 0 · Answer 4 · answered Jul 02 '20 at 19:45

If for some reason you do want to programmatically link to other pages and NOT use you can use this method to enable cmd/ctrl clicking.

Tl;dr when ctrl/cmd is pressed put a flag on the state, then use it to select whether to history.push or window.open the new path.

score 0 · Answer 5 · answered Nov 03 '20 at 12:37

0

Worked for me:

window.open('/conference', '_blank')

answered Nov 03 '20 at 12:37

german-st

1
2

4

Thank you and welcome @german-st, Can you provide an explanation for the answer, as it is very short – Useme Alehosaini Nov 03 '20 at 13:57

React history.push allow user to open in new tab

5 Answers5