我的项目文件夹中有一组 pdf 文件。
我需要做的就是创建指向这些 PDF 文件的链接并在浏览器中查看或下载。
我使用 React Router 4 和 React 16 以及 create-react-app 引导工具。
无论我如何链接它（链接组件或标签），它仍然会转到我的路由器配置中的最后一个路由。
过去两个小时我一直在谷歌上搜索……但没有运气……
有没有办法告诉路由器不要路由 PDF/XLS 文件？
谢谢
【问题讨论】：
标签： reactjs react-router-v4 create-react-app
我遇到了同样的问题，我认为这是因为 CRA 处理查询的方式：我最终将我的 PDF 文件放在公共文件夹中，并使用链接到它们：
{process.env.PUBLIC_URL + '/myfile.pdf'}
作为我的标签的源代码。
我猜不是最好的方法，但效果很好......
【讨论】：
我尝试了 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 项目中删除 service worker。由于某种原因，它会影响 react-router 对服务器路由的处理。
我在这里做了一个 github issue 来阅读它：https://github.com/facebookincubator/create-react-app/issues/3608
【讨论】：
这对我有用：
<Link
to="route"
onClick={(event) => { event.preventDefault(); window.open(filePath); }}>
Click to download
</Link>
【讨论】：
遇到了同样的问题并通过使用老式 html 来解决它：
<a href="docs/document.pdf">
Document
</a>
并使用 webpack.config 中的 CopyWebpackPlugin 将 pdf 复制到我的公共服务文件夹：
plugins: [
new CopyWebpackPlugin([
{
from: 'docs/document.pdf',
to: path.resolve(BUILD_PATH + "/docs/document.pdf")
},
])
]
【讨论】：
我在项目的两个不同区域中遇到了这个问题，在 src 文件夹中的 App 组件中和来自子导航组件的链接中。我在 src 目录中创建了一个“docs”文件夹，并使用 require 语法链接到我的文件，它对我有用。
在导航组件的实例中，我通过将目录向上更改两级来访问该文件。
<Link href={require("../../docs/FILE_NAME.PDF")} target="blank">
Resume
<Link>
在我在同一目录中搜索的 App 组件的实例中。
<Link href={require("./docs/FILE_NAME.PDF")} target="blank">
Resume
</Link>
【讨论】：