reactjs - setTimeout fires but does not redirects

Question

I made a 404 Not Found component, i would like to redirect the user after 3 seconds depending on if the user is logged in or not. thats getting check with isAuthenticated state.

here is my NotFound.js component;

import React, { Fragment } from 'react';
import notfound from '../../img/404.svg';
import { useEffect } from 'react';
import { Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

const NotFound = ({ auth: { isAuthenticated } }) => {
 const styles = {
  width: 'calc(100% - 100px)',
  height: '600px',

  position: 'relative',
  top: '200px',
  marginBottom: '150px',
 };
 useEffect(() => {
    setTimeout(() => {
      if (isAuthenticated) {
        console.log('hi');
      return <Redirect to='/adverts'></Redirect>;
    } else if (!isAuthenticated) {
       console.log('hi2');
     return <Redirect to='/'></Redirect>;
    }
  }, 3000);
});


  return (
      <Fragment>
        <img src={notfound} style={styles}></img>
    </Fragment>
   );
 };

 NotFound.propTypes = {
    auth: PropTypes.object,
 };

 const mapStateToProps = (state) => ({
    auth: state.auth,
 });

 export default connect(mapStateToProps)(NotFound);

here is the console.log;

So the problem is, it fires the 'hi2' in the console but does not redirects.

Answer 1

Try using useHistory.

import { useHistory } from "react-router-dom";

const NotFound = ({ auth: { isAuthenticated } }) => {
  const history = useHistory()
  useEffect(() => {
    setTimeout(() => {
      if (isAuthenticated) {
        console.log('hi');
      history.push('/adverts')
    } else if (!isAuthenticated) {
      console.log('hi2');
      history.push('/')
    }
    }, 3000);
  });

  ...
}