React Router - 触发文件下载

时间:2018-05-21 20:01:17

标签: javascript reactjs react-router-dom

如何在文件路径的情况下跳过反应路由?似乎反应路由器拦截所有链接。以下示例 - 硬编码链接/1.pdf似乎触发了路由器。

我们如何触发文件下载?

const Main = () => {
    return (
        <div>
            <h1>React Router Playground</h1>
            <Link to="/download">Download Area</Link>
        </div>
    );
};

const Download = () => {
    return (
        <div>
            <h1>Download Area</h1>
            <a href="/1.pdf">Download</a>
        </div>
    );
};

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <Router>
                <div>
                    <Route exact path="/" component={Main} />
                    <Route path="/download" component={Download} />
                </div>
            </Router>
        );
    }
}

这是一个相当简单的例子,因此硬编码链接。这些是动态的,并在实际代码中作为道具传递。

1 个答案:

答案 0 :(得分:0)

以下代码与NoMatch组件结合使用,如果它是有效资源,则重新加载URL。

<Router>
  <div>
    <Switch>
      <Route exact path="/" component={Main} />
      <Route exact path="/download" component={Download} />
      <Route component={NoMatch} />
      <Route onEnter={() => window.location.reload()} />
    </Switch>
  </div>
</Router>