React - 如何打开PDF文件作为href目标空白

Question

这个在静态视图上相当简单的平凡任务不符合React.

有人可以告诉我如何在新标签上打开pdf文件作为href吗？

这是我使用react-bootstrap和react-router的代码:

    <NavDropdown eventKey={3} title="Forms">

        <MenuItem eventKey={3.1} href="https://www.google.com/" target="_blank">Form 1</MenuItem>

        <MenuItem eventKey={3.2} href="samba.pdf" target="_blank">Form 2</MenuItem>
    </NavDropdown> 

谷歌的外部链接工作正常.

pdf(保存在与上面代码相​​同的级别目录中)不是.

当我点击pdf链接时,它会将我重定向到我的"404 catch all"路线.

    <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/contact" exact component={Contact} />
        <Route path="/about" exact component={About} />
        <Route component={NotFound} />
    </Switch>;

编辑: 解决方案: Link_Cable回答

Answer 1

将pdf放入/ src中的文件夹中.像组件一样导入它.将href参数设置为导入的pdf和target ="_ blank".

import React, { Component } from 'react';
import Pdf from '../Documents/Document.pdf';

class Download extends Component {

  render() {

    return (
      <div className = "App">
        <a href = {Pdf} target = "_blank">Download Pdf</a>
      </div>
    );
  }
}

export default Download;