click an image for outside url react.js

Question

I am working on a portfolio and I'm using react.js. I simply want to click an image, for example, a StackOverflow icon, and be able to redirect to the page. I'm seeing all sorts of different ways to go about, yet I cannot get it to redirect.

I am using React-Bootstrap which I don't know if that is going to change anything.

export default class Home extends Component {
render() {
    return (
        <Grid>
            <Jumbotron className="brainImg">
            </Jumbotron>
            <div class="footer"><center className="iconsBaby">
                <Image src="giticon.png" className="githubIcon" to="https://github.com/Joeyryanbridges" />
                <Image src="linkedinIcon.png" className="linkedinIcon" href="https://github.com/Joeyryanbridges" />
                <Image src="SOFIcon.png" className="githubIcon" href="https://github.com/Joeyryanbridges" />
            </center>
            </div>
        </Grid>
    )
}

Thank you for looking.

Answer 1

1.You can first declare in the state

load:false 

2.use the onClick event and call a function like -

<Image src="giticon.png" className="githubIcon" onClick={()=> handleClick()} />

3. Inside the function set load to true.
4. Now check the value of the load to direct to whatever you need. I hope it works.

Answer 2

Just wrap tag inside an like this:

   <a href="abc.com">
    <Image src="abc.png" />
   </a>

Or If you are using react-router,then you can do this:

   import { Link } from "react-router-dom";

   <Link to="www.abc.com">
   <Image src="abc.png" />
   </Link>

Hope this help:

Answer 3

There is another method to it , which is just create a onclick attribute to your react element

<img src="<img-link>" alt="<alt-text>" onClick={link} />

and then outside the return statement of your react function you can use 2 methods to link the image which is

location.replace and location.href

both of which would have syntax as follow

window.location.href = "<link>";

and

window.location.replace("<link>");

the methode to use this both is as follow

 const link= () => {            //remember the onclick attribute mentioned in img tag is having name **link**

 window.location.href = "<the-link-to-which-you-want-to-redirect";

 }

in this way you can achive your desired output!!

line 6 contain the function and line 18 contain styled react image element... refer if you want

Note:-

window.locatio.replace("") 

will replace the webpage , so some one clicking on the image would not be able to use back button of browser .

So use them according to your need!!

Answer 4

The easiest way I've found is to just make sure you add target="_blank" rel="noopener noreferrer" to your tag. Like this:

<a href={ resume } target="_blank" rel="noopener noreferrer">
  <img className="resume" src={ resumeLogo } alt="Link to resume" />
</a>