I am trying to have this link open in a new tab so users dont have to leave my site but it is not working with _blank

Question

The link opens but not in a new tab.I am trying to have this link open in a new tab so users don't have to leave my site. I am using target="_blank" but it is not working

<BottomNavigation className={classes.root}>
    <BottomNavigationAction
      label="Instagram"
      rel="noopener noreferrer"
      href="https://www.instagram.com/_vhub/"
      target="_blank"
      icon={
        <img
          src="https://res.cloudinary.com/dvqyek3sb/image/upload/v1566370518/instagram_hmfqj5.png"
          alt="Instagrm"
        />
      }
    />

You need to show the code that is inside `` otherwise there is no way of telling why the is not getting the target prop. — Jon B, Aug 21 '19 at 23:30
There is not tag sir this is all of the code im passing the link to BottomNavigationAction — TheChiefRocker, Aug 21 '19 at 23:34
What you see is the code inside of bottomNavigation Action thanks for the downvote though — TheChiefRocker, Aug 21 '19 at 23:34
So first of all I have no idea what 'BottomNavigationAction' is hence the downvote, you needed to explicitly explain that you were using a Material UI component here to save me googling. I also have no idea if you are talking about React or React-Native? Finally I looked at the docs for `BottomNavigationAction` and there is no prop for href OR target so how can it possibly work?! — Jon B, Aug 22 '19 at 00:06

score 9 · Accepted Answer · answered Aug 21 '19 at 23:58

9

Try put your whole component inside anchor tags or Link component and set their properties:

rel="noopener noreferrer" href="https://www.instagram.com/_vhub/" target="_blank"

answered Aug 21 '19 at 23:58

N. Djokic

898
1
6
19

I treid this and still got the same result – TheChiefRocker Aug 22 '19 at 00:06
Have you removed those properties from your BottomNavigationAction properties? – N. Djokic Aug 22 '19 at 00:11
1

You could also make method: handleInstagramClick = () => { window.open(https://www.instagram.com/_vhub/, '_blank'); } And then add click handler on your component: – N. Djokic Aug 22 '19 at 00:18
Bleh your handles are for class components hook me please haha – TheChiefRocker Aug 24 '19 at 00:31

I am trying to have this link open in a new tab so users dont have to leave my site but it is not working with _blank

1 Answers1