有没有办法利用 React 的 'history.push()' 来触发文件下载？

Question

上下文

我正在尝试让一个按钮触发下载——我正在使用的代码库中的<Button/>组件不支持href，所以我不能做像href="/files/${id}.csv"这样简单的事情。我想我可以使用history()API之类的东西来获取文件，但它将.json附加到我的文件末尾，无法工作。

• 我对history做错了什么或误解了什么
• 如果这不可能，还有什么更好的方式来实现我的目标呢

我尝试了什么

我在一个功能组件中有以下代码：

handleCSVDownload = id => () => {
const { history } = props;
history.push(`/files/${id}.csv`);
}
const { fileId } = props;
<Button onClick={handleCSVDownload(fileId)}>Download File<Button/>

我希望onClick会显示CSV下载对话框。

然而，这并没有发生，我在URL中添加了一个404 w/.json：

GET http://localhost/files/1234.csv.json 404 (Not Found)
^^^^^

注意：此外，另一件奇怪的事情是，如果我点击"；背面"；在我的浏览器中，尽管URL没有解析为onClick，但会提示我下载文件。

问题

为什么.json附加到我的CSV链接？有人能帮助我更好地理解history，以及为什么我的代码可能无法按预期工作吗？有没有更好的解决方案？

Answer 1

我不知道您将哪个库用于历史。但我可以建议一个使用window.open()函数的简单解决方案，它将触发文件下载

handleCSVDownload = id => () => {
window.open(`/files/${id}.csv`, "_blank");
}