Creé una aplicación react js con create-react-app y estoy probando react-pdf para ver archivos pdf. el problema que tengo es que mi código a veces funciona ya veces no. cuando cargo la aplicación por primera vez, el pdf siempre se carga bien, pero si visito otros enlaces/URL en el sitio y luego navego a la página con el pdf, es probable que el pdf no se cargue en algunos intentos con un error "Error al cargar Archivo PDF".

si el error se parece a la imagen de abajo

si tiene éxito, se ve como la imagen de abajo

así es como lo he implementado

importaciones

 import { Document, Page, pdfjs } from 'react-pdf/dist/esm/entry.webpack'; import { useState } from 'react'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

implementación de código

 function ReactPDF() { const imageKitURL = ' https://ik.imagekit.io/kwmvfjr0r'; const pdf = `${imageKitURL}/test_files/file-example_PDF_1MB.pdf`; const [numPages, setNumPages] = useState(null); const [pageNumber, setPageNumber] = useState(1); function onDocumentLoadSuccess({ numPages }) { setNumPages(numPages); setPageNumber(1); } function changePage(offset) { setPageNumber((prevPageNumber) => prevPageNumber + offset); } function previousPage() { changePage(-1); } function nextPage() { changePage(1); } return ( <> <div> <p> Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'} </p> <button type="button" disabled={pageNumber <= 1} onClick={previousPage}> Previous </button> <button type="button" disabled={pageNumber >= numPages} onClick={nextPage}> Next </button> </div> {/* eslint-disable-next-line react/jsx-no-bind */} <Document file={pdf} onLoadSuccess={onDocumentLoadSuccess}> <Page pageNumber={pageNumber} /> </Document> </> ); }

espero que la pregunta sea lo suficientemente detallada para explicar la situación