How to redirect on different URL on image click in reactjs?

Question

I am trying to redirect to the specified URL when clicked on image. It is appending localhost by default at the beginning of the URL and thus considering URL as the sub domain of localhost and its unreachable Approach 1:

<a rel="noopener noreferrer" href={rowData.preview} target="_blank">
   <Image
    className="preview-content"
    src={webAttachment}
   />
</a>

Approach 2:

<Link to={rowData.preview}>
    <Image
     className="preview-content"
     src={webAttachment}
    />
</Link>

{rowData.preview} includes url of any website. Not getting reliable solution in any of the approach.

If the specified URL is a react route you should use the second approach. If its an extrenal URL, the URL must be an absolute one. I mean, it should start with domain/url. — saiyan
– saiyan, Commented Nov 14, 2019 at 6:58
It is external URL eg: its is considering as localhost:3000/google.com — Nirav Panchal
– Nirav Panchal, Commented Nov 14, 2019 at 7:13
try to put the link directly into src without wrapping into rowData.preview and check if you are getting the desired result or not ? — Ronak07
– Ronak07, Commented Nov 14, 2019 at 7:17

Shashwat Prakash · Accepted Answer · 2019-11-14 08:33:48Z

2

Try these lines of code.

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

<Link to="https://www.google.com/">
    <Image src="abc.jpg" className="imageLink" />
</Link>

edited Nov 14, 2019 at 8:33

answered Nov 14, 2019 at 7:12

Shashwat Prakash

4945 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nirav Panchal Over a year ago

it will append localhost:3000/ at the beginning.

ksilentstorm · Accepted Answer · 2019-11-14 07:01:26Z

1

onClick={()=> window.open("someLink", "_blank")}

Visit the stackoverflow link.

Maintaining href "open in new tab" with an onClick handler in React

answered Nov 14, 2019 at 7:01

ksilentstorm

1059 bronze badges

1 Comment

Nirav Panchal Over a year ago

if my url is google.com then it is redirecting me properly. if it is just google.com the it is redirecting me to this localhost:3000/google.com.

saiyan · Accepted Answer · 2019-11-14 07:25:55Z

1

href="google.com" will lead to "your-current-full-url/google.com".
href="/google.com" will lead to "your-domain/google.com".
href="https://google.com" will lead to "google.com".

Not just in react. even in normal html it works the same way. so make sure the external URL you are passing in rowData.preview has http://

edited Nov 14, 2019 at 7:25

answered Nov 14, 2019 at 7:20

saiyan

5727 silver badges23 bronze badges

2 Comments

Nirav Panchal Over a year ago

how to handle when user enter "google.com" or "/google.com" or " https : // google.com" in href ? Any suggestions?

saiyan Over a year ago

You may do userdata.replace(/([\s]+)/g,""); so that you won't have any spaces in entered URL. if(userdata.indexOf("/")==0){userdata=userdata.slice(1, userdata.length-1)};

manzim · Accepted Answer · 2020-10-06 08:41:27Z

0

<a target="_blank" href="https://www.linkedin.com/">
   <img
       src={b4}
       alt="Linkedin"
       className="mw3-ns"
       style={{height: "50px", width: "50px", cursor: "pointer"}}
                                
    />
 </a>

This worked for me. though I got a warning for using target="_blank"

answered Oct 6, 2020 at 8:41

manzim

292 bronze badges

Collectives™ on Stack Overflow

How to redirect on different URL on image click in reactjs?

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related