如何将 React Router Link 组件的重定向延迟 1 秒?

本文介绍了如何将 React Router Link 组件的重定向延迟 1 秒?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当您单击链接时，浏览器会尝试尽快重定向用户.如何在此过程中添加 1 秒延迟?

When you click a link, the browser tries to redirect the user ASAP. How can I add a 1 second delay to this process?

我有以下链接:

  <Link
    to={{
      pathname: `pathname`,
      hash: `#hash`,
    }}
    onClick={this.delayRedirect}
  >

这是我的 delayRedirect 函数的样子:

Here is what my delayRedirect function looks like:

  delayRedirect() {
    // not sure what to put here, to delay the redirect by 1 second
  }

有什么想法吗?谢谢！

推荐答案

import { withRouter } from 'react-router'

class Home extends Component {

  delayRedirect = event => {
      const { history: { push } } = this.props;
      event.preventDefault();
      setTimeout(()=>push(to), 1000);
    }
  };
  <Link
    to={{
      pathname: `pathname`,
      hash: `#hash`,
    }}
    onClick={this.delayRedirect}
  >
}

export default withRouter(Home);

在间隔一秒后使用历史推送新路线

Use history to push new route after a gap of second

这篇关于如何将 React Router Link 组件的重定向延迟 1 秒?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！