我用create-react-app创建了一个react js应用程序，我正在试用react-pdf来查看pdf。我的问题是我的代码有时工作，有时不工作。当我第一次加载应用程序时，pdf总是加载良好，但如果我访问网站上的其他链接/URL，然后导航到带有pdf的页面，PDF可能会在几次尝试后加载失败，并显示错误“无法加载PDF文件”。
如果出现错误，它看起来像下面的图像x1c 0d1x
如果成功，它看起来像下面图像

这就是我实现它的方式
输入

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

代码实现

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>
        </>
    );
}

我希望这个问题足够详细，足以说明情况