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