How to delay the redirect of a React Router Link component for 1 second?
10,506
Solution 1
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
Solution 2
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>
);
}
Solution 3
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.
Related videos on Youtube
Author by
Ralph David Abernathy
Updated on June 04, 2022Comments
-
Ralph David Abernathy almost 2 years
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!
-
Tholle almost 6 yearsHave you seen this answer?
-
gaetanoM almost 6 yearstake a look to DelayLink.jsx
-
Sagiv b.g almost 6 yearsI'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
-
Ralph David Abernathy almost 6 yearsI 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
-
Sagiv b.g almost 6 yearssounds like a job for
TransitionGroup
have you seen the animated-transitions section inreact-router
docs? -
Ralph David Abernathy almost 6 yearsWhoa, that looks really interesting. Will check it out, thanks for the links guys!
-
Darkrum almost 6 years@Tholle all that for react to set a simple setTimeOut??????
-
Ralph David Abernathy almost 6 yearsEnded up using the DelayLink component, thanks!
-
-
panji gemilang almost 4 yearswhat is
to
inside thepush
? -
Jansindl3r over 2 years2021
const navigate = useNavigate(); function delayAndGo(e) { e.preventDefault(); navigate(to) }