Redirect landing page component 5 seconds - reactjs

Question

I am trying to Redirect or Switch the following Hero React component after a 5 second delay using React-Router.
<Redirect to="/home" /> redirect's the component to http://url.com/home instantly.
Any suggestions on how to handle this? Thx.
class Intro extends Component {
render() {
return (
<div className="d-flex w-100 h-100 mx-auto p-4 flex-column">
<Header />
<div
style={{
paddingTop: '40px'
}}>
</div>
<Hero />
<Footer />
</div>
);
}
}
export default Intro;
I've also tried using setTimeout as well

Answer 1

You can use the history prop injected by react-router and invoke the push method inside a setTimeout. You should do it in componentDidMount:
constructor(props) {
// ...
this.redirectTimeout = null;
}
componentDidMount() {
const { history } = this.props;
this.redirectTimeout = setTimeout(() => {
history.push('/home')
}, 5000);
}
Edit: Make sure to clear the timeout to avoid redirects when you move out of the page before the 5 seconds are over, else you will still get redirected:
componentWillUnmount() {
clearTimeout(this.redirectTimeout);
}

Answer 2

You can create a custom DelayRedirect component.
Gist here: https://gist.github.com/JT501/4b0f60fb57b1410604b754fd9031150a
import * as React from 'react';
import { useEffect, useState } from 'react';
import { Redirect, RedirectProps } from 'react-router';
interface DelayProps {
delay: number;
}
const DelayRedirect = ({ delay, ...rest }: RedirectProps & DelayProps) => {
const [timeToRedirect, setTimeToRedirect] = useState(false);
useEffect(() => {
const timeout = setTimeout(() => {
setTimeToRedirect(true);
}, delay);
return () => clearTimeout(timeout);
}, [delay]);
return timeToRedirect ? <Redirect {...rest} /> : null;
};
export default DelayRedirect;
Usage:
<DelayRedirect to={'/'} delay={1000} />