How to delay the redirect of a React Router Link component for 1 second?

Question

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

I have the following link:

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

Here is what my delayRedirect function looks like:

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

Any ideas? Thanks!

Have you [seen this answer](https://stackoverflow.com/questions/49840197/how-can-i-set-delay-function-in-react-routing)? — Tholle, Aug 11 '18 at 21:16
take a look to [DelayLink.jsx](https://gist.github.com/headzoo/8f4c6a5e843ec26abdcad87cd93e3e2e) — gaetanoM, Aug 11 '18 at 21:16
I'm curious to know, what is the use case? maybe if you need to delay a route transition you are not on the right track — Sagiv b.g, Aug 11 '18 at 21:17
I would like to add a one second delay to load an animation after a link is pressed, just for the purpose of aesthetics. @Sagivb.g — Ralph David Abernathy, Aug 11 '18 at 21:18
sounds like a job for `TransitionGroup` have you seen the [animated-transitions](https://reacttraining.com/react-router/web/example/animated-transitions) section in `react-router` docs? — Sagiv b.g, Aug 11 '18 at 21:20
Whoa, that looks really interesting. Will check it out, thanks for the links guys! — Ralph David Abernathy, Aug 11 '18 at 21:21

score 5 · Answer 1 · answered Aug 11 '18 at 21:58

5

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

answered Aug 11 '18 at 21:58

Shishir Arora

5,521
4
30
35

what is `to` inside the `push` ? – panji gemilang Aug 09 '20 at 03:04

score 5 · Answer 2 · answered Nov 12 '20 at 22:19

5

Here is my function component version, based on @Shishir's answer:

import React from "react";
import { Link, useHistory } from "react-router-dom";

export default function CustomLink({ to, children }) {
  const history = useHistory();

  function delayAndGo(e) {
    e.preventDefault();

    // Do something..

    setTimeout(() => history.push(to), 300);
  }

  return (
    <Link to={to} onClick={delayAndGo}>
      {children}
    </Link>
  );
}

answered Nov 12 '20 at 22:19

Pedro Netto

135
2
7

1

2021 `const navigate = useNavigate(); function delayAndGo(e) { e.preventDefault(); navigate(to) }` – Jansindl3r Nov 09 '21 at 21:50

Kenny Lepping · Answer 3 · 2021-11-11T05:28:53.280

Based on Pedro's answer, here's a way to add the delayAndGo function inside a component like a NavBar:

import React from "react";
import { Link, useHistory } from "react-router-dom";

export default function NavBar() {
  const history = useHistory();

  function delayAndGo(e, path) {
    e.preventDefault();

    // Do something..

    setTimeout(() => history.push(path), 300);
  }

  return (
    <Link to="/" onClick={(e) => delayAndGo(e, "/")}>
        Home
    </Link>
    <Link to="/about" onClick={(e) => delayAndGo(e, "/about")}>
        About
    </Link>
    <Link to="/portfolio" onClick={(e) => delayAndGo(e, "/portfolio")}>
        Portfolio
    </Link>
  );
}

Note the to value of the Link elements do not matter in this approach.

score 1 · Answer 4 · edited Feb 11 '22 at 04:47

1

Install module

npm install p-min-delay
npm i @loadable/component

And Import like

import loadable from '@loadable/component'
import pMinDelay from 'p-min-delay'

edited Feb 11 '22 at 04:47

Akshay I

3,675
1
34
57

answered Feb 03 '22 at 08:49

asad minhas

147
2
10

How to delay the redirect of a React Router Link component for 1 second?

4 Answers4

Linked