在React中查看/下载Pdf文件 - 路由器4

Question

我有一组pdf文件位于我项目的文件夹中.

我需要做的就是创建一个指向这些PDF文件的链接,并在浏览器中查看或下载它们.

我使用React Router 4和React 16以及create-react-app bootstrapping工具.

无论我如何链接它(链接组件或标签)它仍然在我的路由器配置中的最后一个路由.

谷歌最近两个小时一直在谷歌...但没有运气..

有没有办法告诉路由器不要路由PDF/XLS文件？

谢谢

Answer 1

我试过squizz的方式,但我发现的问题是,如果你点击链接超过一次或两次,它将恢复回到最后一条路线.

您可以创建一个文件夹src来保存您的PDF 文件,并正常链接到它们,例如:

import pdf from '../files/myfile.pdf'
render () {
    <a href={pdf}>Click here for my pdf</a>
}

唯一的问题是,你会得到一个附加到你的文件的哈希,所以它将作为myfile.d2e24234.pdf或其他东西.我认为它与文件加载器有关...目前正试图解决它.

编辑

如果您不想使用src,答案是从create-react-app项目中删除服务工作者.由于某种原因,它会影响react-router对服务器路由的处理.

我在这里写了一个github问题来阅读它:https://github.com/facebookincubator/create-react-app/issues/3608

Answer 2

我遇到了同样的问题，我认为这是因为 CRA 处理查询的方式：我最终将我的 PDF 文件放在公共文件夹中，并使用以下链接链接到它们：

{process.env.PUBLIC_URL + '/myfile.pdf'}

作为 src 到我的标签。

我猜不是最好的方法，但效果很好......