React Router - показать PDF в новой вкладке с помощью window.open

Question

Я пытаюсь отобразить свой PDF-файл в браузере на новой вкладке, но у меня такое ощущение, что React Router берет верх и не отображает его правильно.

Вот моя функция React в интерфейсе, которая должна откройте PDF-файл:

const openPDF = (e) => {
    const prettyPDFName = e.target.textContent;
    openPDFAsync(prettyPDFName);

    console.log('pdfTextContent: ', prettyPDFName);
    const prettyFileName =
        prettyPDFName
            .substring(0, prettyPDFName.length - 4)
            .replace(/[ ,.]/g, '') + '.pdf';
    window.open(`/pdf/${prettyFileName}`, '_blank');
};

Это открывает новую вкладку с правильным URL-адресом в адресной строке. Но он просто показывает мое приложение React с навигацией вверху и пустым содержимым посередине.

Я нашел кое-что на SO, чтобы помешать React Router захватить определенный маршрут c. Итак, в моем приложении. js Я пробовал это:

const pdf_regex = /^\/pdf\/.*/;
    // if using "/pdf/" in the pathname, don't use React Router

    if (pdf_regex.test(window.location.pathname)) {
        return <div />; // must return at least an empty div
    } else {
        // use React Router
        return (
            <Router>
            ...

Это просто отображает полностью пустую страницу, а когда я проверяю, только пустой div, которого, я думаю, и следовало ожидать.

Для получения дополнительной информации, вот код узла, который вызывается из вызова openPDFAsync(prettyPDFName);:

router.get('/openPDFFile', async (req, res) => {
    const pretty_PDF_name = req.query.pdf;
    const pdfFilename = (await SDS.getPDFFileName({ pretty_PDF_name }))
        .dataValues.sheet_file_name;

    const cleanPDFName =
        pretty_PDF_name
            .substring(0, pretty_PDF_name.length - 4)
            .replace(/[ ,.]/g, '') + '.pdf';

    const pdfFilepath = `./path/to/file/${pdfFilename}`;
    console.log(cleanPDFName, pdfFilepath);
    router.get(cleanPDFName, async (req, res) => {
        res.sendFile(__dirname + pdfFilepath);
    });

Answer 1

Почему бы просто не открыть новое окно или не установить href тогда, поэтому вместо того, чтобы возвращать просто div, выполните одно из следующих:

1. Родительское окно, в котором существует ваше приложение - Имеет сообщение <div> Return to homepage </div> и выполните window.open(url), который генерирует новый запрос, здесь ваш сервер узла должен обрабатывать страницу напрямую без использования функции промежуточного программного обеспечения App, которая передает управление маршрутизатору React.

2. window.location.href - помните, что вы находитесь вне области действия своего приложения, я также считаю, что передача цели: _self или _blank пропустит маршрутизатор.