使用 React Router 从 Expressr 下载文件答案

【问题标题】：Downloading a File from Expressr with React Router使用 React Router 从 Expressr 下载文件
【发布时间】：2019-04-24 17:58:10
【问题描述】：

我的 server.js 上有这条路线

app.get('/api/users/download/:id', auth, admin, (req, res) => {
  const file = path.resolve(".") + `/uploads/${req.params.id}`;
    res.download(file)
})

这是我在 React 中的组件的一部分（使用 CRA）

class AddFile extends Component {
          showFileList = () => (
                this.state.files ?
                    this.state.files.map((item,i)=>(
                        <li key={i}>
                            <Link to={`/api/users/download/${item}`} target="_blank">
                                {item}
                            </Link>
                        </li>
                    ))
                :null
            )
}

    render() {
        return (
          <div>
             {this.showFileList()}
           </div>
          );
    }
export default AddFile;

这些是我的一些路线

const Routes = () => {
  return(
    <Layout>
      <Switch>
        <Route path="/admin/add_file" exact component={Auth(AddFile, true)}/>
        <Route component={Auth(PageNotFound)}/>
      </Switch>
    </Layout>
  )
}

当我单击 li 项目时，它会将我带到 404 not found 路由，当它应该将我带到我在 Express 中处理的路由并下载文件时，但显然首先被反应路由器捕获并显示我我创建的“未找到”页面，是否与 package.json 上的代理有关？

  "proxy": "http://localhost:5000"

谢谢！

【问题讨论】：

标签： javascript reactjs express react-router

【解决方案1】：

一些测试（https://codesandbox.io/s/8ykx3j88v0）表明你可以使用

<Link to="/some-file" download target="_self">..</Link>
一个普通的<a href="/some-file" download>...</a>

【讨论】：

我不工作，浏览器“下载一个文件”（虽然不像以前那样带我去一个新的路线）但是有一个类似的消息：“错误：没有文件”。此外，快递中的路线没有被触发（它没有显示我的 console.logs）。看起来它仍在浏览器中处理，因为它从服务器下载一个空文件而不是文件。
@R.Romero 在浏览器中打开开发者工具，进入网络选项卡，然后单击应用程序中的按钮，查看是否在网络选项卡上注册了网络请求。如果那里没有注册，那么它由反应/浏览器处理。另一方面，如果出现，则问题出在后端（检查记录的 url 是否正确，并检查它是否完成或失败）
它现在可以工作了，我认为它与 Create React App 的代理有关，我将我的项目移动到更新的版本（v2+）并使用文件中的 http 代理中间件库设置代理使用以下内容调用 setupProxy.js： const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/api/', { target: 'localhost:5000' })); };顺便说一句，它现在可以工作了！
@R.Romero 很高兴你把它整理好了。
这仅适用于来自同一域的资源。