我尝试了 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 问题来阅读它：https : //github.com/facebookincubator/create-react-app/issues/3608

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

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

作为 src 到我的标签。

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

遇到了同样的问题并通过使用老式的 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>