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"
        />
      }
    />

Induna

You need to show the code that is inside <BottomNavigationAction /> otherwise there is no way of telling why the <a> is not getting the target prop. – Freaky

There is not <a> tag sir this is all of the code im passing the link to BottomNavigationAction – Induna

What you see is the code inside of bottomNavigation Action thanks for the downvote though – Induna

I tried with the a tag got the same result – Induna

What is the generated html? – Corri

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?! – Freaky

Answer 1

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"

Gaulin

I treid this and still got the same result – Induna

Have you removed those properties from your BottomNavigationAction properties? – Gaulin

You could also make method: handleInstagramClick = () => { window.open(instagram.com/_vhub, '_blank'); } And then add click handler on your component: <BottomNavigationAction onClick={this.handlePoliciesClick} /> – Gaulin

Bleh your handles are for class components hook me please haha – Induna