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 http://domain/url. — saiyan, Nov 14 '19 at 06:58
It is external URL eg: its is considering as localhost:3000/google.com — Nirav Panchal, Nov 14 '19 at 07: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, Nov 14 '19 at 07:17

Shashwat Prakash · Answer 1 · 2019-11-14T08:33:48.247

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 '19 at 08:33

answered Nov 14 '19 at 07:12

Shashwat Prakash

434
5
14

it will append localhost:3000/ at the beginning. – Nirav Panchal Nov 14 '19 at 07:48

score 1 · Answer 2 · answered Nov 14 '19 at 07:01

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 '19 at 07:01

ksilentstorm

105
9

if my url is https://www.google.com then it is redirecting me properly. if it is just google.com the it is redirecting me to this http://localhost:3000/google.com. – Nirav Panchal Nov 14 '19 at 07:29

saiyan · Answer 3 · 2019-11-14T07:25:55.857

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 '19 at 07:25

answered Nov 14 '19 at 07:20

saiyan

512
6
21

how to handle when user enter "google.com" or "/google.com" or " https : // google.com" in href ? Any suggestions? – Nirav Panchal Nov 14 '19 at 08:11
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)}; – saiyan Nov 14 '19 at 08:29

score 0 · Answer 4 · answered Oct 06 '20 at 08:41

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

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

4 Answers4