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

html reactjs material-ui nonblank
TheChiefRocker picture TheChiefRocker · Aug 22, 2019 · Viewed 11.2k times · Source

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

Answer

N. Djokic picture N. Djokic · Aug 22, 2019

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"

Related questions

Make material-ui reactjs FloatingActionButton float

After trying to find an example where the FloatingActionButton floats at its standard bottom-right screen position with no results, I come to you if you could provide one because it seems to be a normal button with no inteligence to …

Read More
How to use radio buttons in ReactJS?

I am new to ReactJS, sorry if this sounds off. I have a component that creates several table rows according to the received data. Each cell within the column has a radio checkbox. Hence the user can select one site_…

Read More
Get form data in ReactJS

I have a simple form in my render function, like so: render : function() { return ( <form> <input type="text" name="email" placeholder="Email" /> <input type="password" name="password" placeholder="Password" /> <button type="button" onClick={…

Read More