使用 React Router 从 Expressr 下载文件

Question

我的 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 未找到路由，当它应该带我到我在 Express 中处理的路由并下载文件时，但显然首先被反应路由器捕获并显示“Not找到”我创建的页面，它可能与 package.json 上的代理相关吗？

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

谢谢你！

Answer 1

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

• <Link to="/some-file" download target="_self">..</Link>
• 一个常规的<a href="/some-file" download>...</a>