<div>
        <a href="https://chat-app-pathum.web.app/pdf/test.pdf" target="_blank" rel="noopener noreferrer">
          chat app
        </a>
      </div>
      <div>
        <a href="/pdf/test.pdf" target="_blank" rel="noopener noreferrer">
          sample link
        </a>
      </div>
      <div>
        <a
          href="http://www.africau.edu/images/default/sample.pdf"
          target="_blank"
          rel="noopener noreferrer"
        >
          hardcoded pdf
        </a>
      </div>

I have a react component with these three links. test.pdf file is saved in the public/pdf folder and the app is hosted in the domain name of https://chat-app-pathum.web.app

For the first link, I gave an absolute path. The second link I gave relative path. The third one is from a different domain name and I gave an absolute path.

All these things are working fine in the web browser. But in the IOS webview (Native mobile app runs the web app in a browser) only the third link opens the document, the other two have no response when I click on top of the link.

How can I fix this at React code level?

This is the link I use https://chat-app-pathum.web.app