时间戳

首页 > 解决方案 > React Router - 触发文件下载

javascript - React Router - 触发文件下载

问题描述

在文件路径的情况下如何跳过反应路由？似乎反应路由器拦截了所有链接。下面的示例 - 硬编码链接/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>
        );
    }
}

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

标签： javascriptreactjsreact-router-dom

解决方案

以下代码与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>

推荐阅读