Tenemos una aplicación web donde cargamos el enlace pdf de BE y lo abrimos usando JavaScript como este.

 const openLink = () => { window.open("http://www.africau.edu/images/default/sample.pdf", "_blank"); }

Esto funciona bien para la web. Pero también usamos esta misma aplicación web en una aplicación móvil. Tenemos una aplicación nativa para Android e IOS que proporciona un navegador web y ejecuta la misma aplicación web. Los usuarios no sentirán ninguna diferencia, funcionará como una aplicación móvil normal.

Pero para esa aplicación móvil no funciona el código anterior. Una etiqueta <a> normal también funciona bien en el entorno de la aplicación móvil.

 <a href='http://www.africau.edu/images/default/sample.pdf' target="_blank">Link</a>

Ahora nuestro objetivo es representar una etiqueta normal e imitar el evento onClick nativo usando JavaScript. Por alguna razón de seguridad, no podemos representar directamente la etiqueta <a> con href , sino que configuramos href más tarde usando refs. Pero ahora necesitamos una forma de abrir el enlace en lugar de window.open()

Este caso de uso puede parecer extraño, pero tenemos que seguir esto para algunas preocupaciones más. Este es mi código actual

 function App() { const tag = useRef(); const openLink = () => { // window.open("http://www.africau.edu/images/default/sample.pdf", "_blank"); tag.current.href = 'http://www.africau.edu/images/default/sample.pdf' // set the loaded dynamic pdf link from BE // open the link code ... } return ( <div className="App"> <button onClick={openLink}>click me</button> <a href='' ref={tag} target="_blank" style={{display:"none"}}></a> </div> ); }