External link not working when using LINK from react router dom

Question

This is the code i have used for redirection.

It is redirecting to

http://localhost:3000/something/https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

instead of

https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

<Link
  to={{
    pathname:
      "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
  }}
  target="_blank"
>
  <Button variant="contained" className="py-1 px-2">
    <i className="ri-upload-2-line pe-2"></i> Apply
  </Button>
</Link>

checkout the answer : https://stackoverflow.com/questions/42914666/react-router-external-link — Mukhriddin Shakhriyorov, Mar 03 '22 at 07:48

score 0 · Answer 1 · answered Mar 03 '22 at 07:48

0

Next.js Link is designed to be used only as a internal routing tool, because it works with next.js router. For external link use standart anchor tag <a href...

answered Mar 03 '22 at 07:48

Wraithy

859
3
8

score 0 · Answer 2 · answered Mar 03 '22 at 07:54

I think react-router attempt assuming relative path, if you want absolute link you can use directly tag a instead of Link component.

<a href="https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" target="_blank">
  <Button
    variant="contained"
    className="py-1 px-2">
      <i className="ri-upload-2-line pe-2"></i> Apply
  </Button>
</a>

score 0 · Answer 3 · answered Mar 03 '22 at 07:54

If you are using next/link you need to use Link as bellow

<Link
  href={"https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"}
  passHref
>
  <Button variant="contained" className="py-1 px-2">
    <i className="ri-upload-2-line pe-2"></i> Apply
  </Button>
</Link>

And if you are using react-router-dom you can open external link like this

<Link to={{ pathname: "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }} target="_blank" />

External link not working when using LINK from react router dom

3 Answers3