title: Redirection with useEffect() Not Working?
body: <p>If the login is successful and a token is stored in localStorage, I should be redirected to a private route i.e /panel. If not, I should show the error message from ShowError().</p>
  
  <p>Currently, my error message is being displayed if the login is not successful so it's all good. However, if there is a token present, there is still no redirection. </p>
  
  <pre><code>function LoginPage (){
    const [state, setState] = useState({
      email: '',
      password: '',
    }); 
  
   const [submitted, setSubmitted] = useState(false);
   const [shouldRedirect, setShouldRedirect] = useState(false);
  
  function ShowError(){
    if (!localStorage.getItem('token'))
    {
      console.log('Login Not Successful');
      return (
        &lt;ThemeProvider theme={colortheme}&gt;
      &lt;Typography color='primary'&gt;
        Login Unsuccessful
        &lt;/Typography&gt;
        &lt;/ThemeProvider&gt;)
    }
  }
  
  // function FormSubmitted(){
  //   setSubmitted(true);
  //   console.log('Form submitted');
  // }
  
  // function RedirectionToPanel(){
  //   console.log('check');
  //   if(submitted &amp;&amp; localStorage.getItem('token')){
  //     console.log('Finall');
  //     return &lt;Redirect to='/panel'/&gt;
  //   }
  // }
  
  useEffect(() =&gt; {
      if(localStorage.getItem('token')){
        setShouldRedirect(true);
      }
    },[] );
  
  
    function submitForm(LoginMutation: any) {
      setSubmitted(true);
      const { email, password } = state;
      if(email &amp;&amp; password){
        LoginMutation({
          variables: {
              email: email,
              password: password,
          },
      }).then(({ data }: any) =&gt; {
        localStorage.setItem('token', data.loginEmail.accessToken);
      })
      .catch(console.log)
      }
    }
      return (
        &lt;Mutation mutation={LoginMutation}&gt;
          {(LoginMutation: any) =&gt; (
            &lt;Container component="main" maxWidth="xs"&gt;
              &lt;CssBaseline /&gt;
              &lt;div style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center'
              }}&gt;
                &lt;Avatar&gt;
                  &lt;LockOutlinedIcon /&gt;
                &lt;/Avatar&gt;
                &lt;Typography component="h1" variant="h5"&gt;
                  Sign in
                &lt;/Typography&gt;
                &lt;Formik
                  initialValues={{ email: '', password: '' }}
                  onSubmit={(values, actions) =&gt; {
                    setTimeout(() =&gt; {
                      alert(JSON.stringify(values, null, 2));
                      actions.setSubmitting(false);
                    }, 1000);
                  }}
                  validationSchema={schema}
                &gt;
                  {props =&gt; {
                    const {
                      values: { email, password },
                      errors,
                      touched,
                      handleChange,
                      isValid,
                      setFieldTouched
                    } = props;
                    const change = (name: string, e: any) =&gt; {
                      e.persist();                
                      handleChange(e);
                      setFieldTouched(name, true, false);
                      setState( prevState  =&gt; ({ ...prevState,   [name]: e.target.value }));  
                    };
                    return (
                      &lt;form style={{ width: '100%' }} 
                      onSubmit={e =&gt; {e.preventDefault();
                      submitForm(LoginMutation);}}&gt;
                        &lt;TextField
                          variant="outlined"
                          margin="normal"
                          id="email"
                          fullWidth
                          name="email"
                          helperText={touched.email ? errors.email : ""}
                          error={touched.email &amp;&amp; Boolean(errors.email)}
                          label="Email"     
                          value={email}
                          onChange={change.bind(null, "email")}
                        /&gt;
                        &lt;TextField
                          variant="outlined"
                          margin="normal"
                          fullWidth
                          id="password"
                          name="password"
                          helperText={touched.password ? errors.password : ""}
                          error={touched.password &amp;&amp; Boolean(errors.password)}
                          label="Password"
                          type="password"
                          value={password}
                          onChange={change.bind(null, "password")}
                        /&gt; 
                        {submitted &amp;&amp; ShowError()}
  
                        &lt;FormControlLabel
                          control={&lt;Checkbox value="remember" color="primary" /&gt;}
                          label="Remember me"
                        /&gt;
                        &lt;br /&gt;
                        &lt;Button className='button-center'
                          type="submit"
                          disabled={!isValid || !email || !password}
                          // onClick={handleOpen}
                          style={{
                            background: '#6c74cc',
                            borderRadius: 3,
                            border: 0,
                            color: 'white',
                            height: 48,
                            padding: '0 30px'
                          }}
                        &gt;                       
                          Submit&lt;/Button&gt;
                        &lt;br&gt;&lt;/br&gt;
                        &lt;Grid container&gt;
                          &lt;Grid item xs&gt;
                            &lt;Link href="#" variant="body2"&gt;
                              Forgot password?
                            &lt;/Link&gt;
                          &lt;/Grid&gt;
                          &lt;Grid item&gt;
                            &lt;Link href="#" variant="body2"&gt;
                              {"Don't have an account? Sign Up"}
                            &lt;/Link&gt;
                          &lt;/Grid&gt;                    
                        &lt;/Grid&gt;
                      &lt;/form&gt;
                    )
                  }}
                &lt;/Formik&gt;
              &lt;/div&gt;
              &lt;Box mt={8}&gt;
                &lt;Copyright /&gt;
              &lt;/Box&gt;
              {/* {submitted &amp;&amp; &lt;Redirect to='/panel'/&gt;} */}
            &lt;/Container&gt;
            )
          }
        &lt;/Mutation&gt;
      );
  }
  
  export default LoginPage;
  </code></pre>
  
  <p>My App.tsx:</p>
  
  <pre><code>const token = localStorage.getItem('token');
  
  const PrivateRoute = ({component, isAuthenticated, ...rest}: any) =&gt; {
    const routeComponent = (props: any) =&gt; (
        isAuthenticated
            ? React.createElement(component, props)
            : &lt;Redirect to={{pathname: '/404'}}/&gt;
    );
    return &lt;Route {...rest} render={routeComponent}/&gt;;
  };
  
  export default function App() {
    return (
      &lt;div&gt;
        &lt;BrowserRouter&gt;
        &lt;Switch&gt;
        &lt;Route exact path='/' component= {HomePage}&gt;&lt;/Route&gt;
        &lt;Route path='/login' component= {LoginPage}&gt;&lt;/Route&gt;
        &lt;Route path='/404' component= {Error404Page}&gt;&lt;/Route&gt;
        &lt;PrivateRoute
        path='/panel'
        isAuthenticated={token}
        component={PanelHomePage}
        /&gt;
        &lt;Redirect from='*' to='/404' /&gt;
        &lt;/Switch&gt;
        &lt;/BrowserRouter&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>