How can i set delay function in react routing? - reactjs

Question

How can I set a delay function on React.js? Is there any way to add or remove class in react routing so that page could be transition? Add, remove or toggle class should work every time. Is it possible to add, remove or toggle class on routing with a delay function? or can I use a third party library for that?
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const BasicExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>Rendering with React</Link>
</li>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<Route path={`${match.url}/:topicId`} component={Topic} />
<Route
exact
path={match.url}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
);
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
);
export default BasicExample;

Answer 1

I modified the above answer from Paul into a functional component that is more up to date:
import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { Link, useHistory, useLocation } from "react-router-dom";
// Functional link component which delays page navigation
export const DelayLink = props => {
const { delay, onDelayStart, onDelayEnd, replace, to, ...rest } = props;
let timeout = null;
let history = useHistory();
let location = useLocation();
useEffect(() => {
return () => {
if (timeout) {
clearTimeout(timeout);
}
};
}, [timeout]);
const handleClick = e => {
// if trying to navigate to current page stop everything
if (location?.pathname === to) return;
onDelayStart(e, to);
if (e.defaultPrevented) {
return;
}
e.preventDefault();
timeout = setTimeout(() => {
if (replace) {
history.replace(to);
} else {
history.push(to);
}
onDelayEnd(e, to);
}, delay);
};
return <Link {...rest} to={to} onClick={handleClick} />;
};
DelayLink.propTypes = {
// Milliseconds to wait before registering the click.
delay: PropTypes.number,
// Called after the link is clicked and before the delay timer starts.
onDelayStart: PropTypes.func,
// Called after the delay timer ends.
onDelayEnd: PropTypes.func,
// Replace history or not
replace: PropTypes.bool,
// Link to go to
to: PropTypes.string
};
DelayLink.defaultProps = {
replace: false,
delay: 0,
onDelayStart: () => {},
onDelayEnd: () => {}
};
export default DelayLink;
Gist

Answer 2

https://gist.github.com/headzoo/8f4c6a5e843ec26abdcad87cd93e3e2e
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
/**
* Wraps the React Router Link component and creates a delay after the link is clicked.
*/
export default class DelayLink extends React.Component {
static propTypes = {
/**
* Milliseconds to wait before registering the click.
*/
delay: PropTypes.number,
/**
* Called after the link is clicked and before the delay timer starts.
*/
onDelayStart: PropTypes.func,
/**
* Called after the delay timer ends.
*/
onDelayEnd: PropTypes.func
};
static defaultProps = {
delay: 0,
onDelayStart: () => {},
onDelayEnd: () => {}
};
static contextTypes = Link.contextTypes;
constructor(props) {
super(props);
this.timeout = null;
}
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
}
}
/**
* Called when the link is clicked
*
* #param {Event} e
*/
handleClick = (e) => {
const { replace, to, delay, onDelayStart, onDelayEnd } = this.props;
const { history } = this.context.router;
onDelayStart(e, to);
if (e.defaultPrevented) {
return;
}
e.preventDefault();
this.timeout = setTimeout(() => {
if (replace) {
history.replace(to);
} else {
history.push(to);
}
onDelayEnd(e, to);
}, delay);
};
render() {
const props = Object.assign({}, this.props);
delete props.delay;
delete props.onDelayStart;
delete props.onDelayEnd;
return (
<Link {...props} onClick={this.handleClick} />
);
}
}

Answer 3

Recently had the same problem I needed to solve. Made this package to help anyone that needs to do the same.
https://www.npmjs.com/package/delay-react-route-exit

Answer 4

for me this is the most clear way I use always
import { useNavigate } from "react-router-dom";
function Component() {
const navigate = useNavigate()
// this is a function which returning a promise in the requested time
function wait(time) {
return new Promise(resolve => {
setTimeout(resolve, time);
});
}
// this is the routing function
async function goToPage() {
// it will navigate to the page 500ms after clicing the div
await wait(500);
navigate(`/movie/${whatever}`);
}
return <div onClick={goToPage}>
}

Answer 5

I modified the above answer from Kim into a v6 hook (useNavigate) from v5 hook(useHistory).
import { Link, useNavigate, useLocation } from "react-router-dom";
...
...
let navigate = useNavigate();
...
...
timeout = setTimeout(() => {
if (replace) {
navigate(to, { replace: true });
} else {
navigate(to);
}
onDelayEnd(e, to);
}, delay);
Gist