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.

returning from setTimeout actually don't do much, you can use `useHistory` to do the same, — Naren, Jan 05 '21 at 11:21
I'm pretty sure ```Redirect``` only works if you're actually rendering the ```Redirect```. Try using the history prop and push routes to the history stack. — Kyle Lambert, Jan 05 '21 at 11:22

score 1 · Accepted Answer · answered Jan 05 '21 at 11:24

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);
  });

  ...
}

answered Jan 05 '21 at 11:24

Naren

4,152
3
17
28

I get it now, i should have use history instead of rendering redirect directly. Thank you! – wasilikoslow Jan 05 '21 at 11:28
you can use `redirect` in as part of rendering template. Check out this [answer](https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-the-new-react-router-dom-of-reactjs/43230829#43230829), this will help you to understand concept of the rendering with redirect – Naren Jan 05 '21 at 11:31

score 1 · Answer 2 · answered Jan 05 '21 at 11:36

That's because setTimeout callback function is not part of NotFound Component return statement.

if you need to use Redirect Component you need to do something like this:

const [redirect, setRedirect] = useState(null);
useEffect(() => {
    setTimeout(() => {
      if (isAuthenticated) {
        console.log('hi');
        setRedirect('/adverts')
    } else if (!isAuthenticated) {
       console.log('hi2');
        setRedirect('/')
    }
  }, 3000);
});

if(redirect){
  return <Redirect to={redirect} />
}

return <>...</>

//+++++++++++++++++++
//or use history object like this:

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

return <>...</>

score 0 · Answer 3 · answered Jan 05 '21 at 11:25

0

You should have conditional rendering of <Redirect /> as part of your return statement.

For more detailed answer check How to use Redirect in the new react-router-dom of Reactjs

answered Jan 05 '21 at 11:25

Luka

828
9
15

setTimeout fires but does not redirects

3 Answers3