React Router - 在带有 window.open 的新选项卡中显示 PDF

Question

我正在尝试在浏览器中的新选项卡中显示我的 PDF，但我感觉 React Router 正在接管并且无法正确显示。

这是我应该打开 PDF 的前端 React 函数：

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 接管特定的路由。所以在我的 app.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) 生成新请求，这里让您的节点服务器直接处理页面，而不使用将控制权传递给 React 的 App 中间件函数路由器。

2. window.location.href- 记住，你超出了你的应用范围，我也相信通过目标，无论是_self 还是_blank 都会跳过路由器。