How to "Redirect to" after 'x' seconds using react-router-dom

Question

I'm beginner in React Js. I would like to redirect to path '/event' after 2 seconds.

This way is not working:

import React from 'react';
import { getFormData } from '../../../helpers/form';
import { eventCreate } from '../../../actions/EventActions';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';

if (event) {
  setTimeout(() => {
    return <Redirect to={'/event'} />;
  }, 2000);
}

But if I change it to:

if (event) {
  return <Redirect to={'/event'} />;
}

It works perfectly. How could I redirect after 2 seconds?

Answer 1

2022 Update: While updating versions (React 18, React Router DOM 6) I noticed it required a bit of refactor.

import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

export default function myComponent () {
  const navigate = useNavigate()

  useEffect(() => {
    setTimeout(() => {
      navigate('/event')
    }, 2000)
  }, [])
  return <div>Content</div>
}

2021 Update: After learning more about React, I'd probably recommend using useEffect to mimic the functionality of componentDidMount in a functional component.

import React, { useEffect, useHistory } from 'react'

export default function myComponent () {
  const history = useHistory()

  useEffect(() => {
    setTimeout(() => {
      history.push('/event')
    }, 2000)
  }, [])
  return <div>Content</div>
}

Previous answer: Is your if (event) { inside a component of some sort? I think you could achieve this one of two ways. Either:

componentDidMount() {
  if (event) {
    setTimeout(() => { 
      this.props.history.push('/event');
    }, 2000)
  }
}

Note, to use componentDidMount and this, you'll have to use a class component which I don't see in your example. Or:

class RedirectExample extends Component {
  state = {
    redirect: false
  }

  componentDidMount() {
    this.id = setTimeout(() => this.setState({ redirect: true }), 2000)
  }

  componentWillUnmount() {
    clearTimeout(this.id)
  }

  render() {
    return this.state.redirect
      ? <Redirect to='/event' />
      : <div>Content</div>
  }
}

As requested in a comment, I modified this answer to include a refactor to functional component. Note, the following code is untested but should give you an idea of how you might accomplish it.

import React, { useState } from 'react'
import { Redirect } from 'react-router-dom'

function RedirectExample() {
  const [redirectNow, setRedirectNow] = useState(false)
  if (redirectNow) {
    return <Redirect to='/event' />
  }
  return <div>Content</div>
}

Or possibly (I haven't used useHistory before but from the documentation you might be able to do something like this):

import React from 'react'
import { useHistory } from 'react-router'

function RedirectExample() {
  const history = useHistory()

  // setTimeout may cause an error
  setTimeout(() => {
    history.push('/event')
  }, 2000)
  return <div>Content</div>
}