I am generating a pdf using react-pdf library. Everything seems to be working fine but I can't make the Link element from @react-pdf/renderer to work properly.

const add_hyperlink = (url_text: string) => {
  return <Text><Link src={url_text}>{url_text}</Link></Text>;
};

In the pdf document, it appears as a link should and even the pointer changes on hover, on clicking the link, in chrome nothing happens, while in adobe reader, it results in a security block.

I tried to use an <a> tag instead, but it resulted in the same output. Does someone know how to resolve this? Thanks.

EDIT: Something I realized while researching on this. Noting down because it is easy to get confused with the tiny differences.

1. library @react-pdf/renderer is used to create pdfs in react.
2. library react-pdf is used to display existing pdf in a react app.

There were several mentions about using annotation options and including "import 'react-pdf/dist/Page/AnnotationLayer.css';" which made links appear properly for many developers. However this belongs to react-pdf library and will only work if it is needed to render pdf within the react-app.

In this case, I am creating a new PDF with @react-pdf/renderer but I am generating a link to download the generated PDF file (https://react-pdf.org/advanced#on-the-fly-rendering).

I found the solution to my problem as well. The link I was using is supposed to redirect to another url, and hence the problem. I used the final link in src and then it works smooth.

I hope these observations are of help to someone in the future :)