title: React Router // redirect to dashboard when logged in
body: <p>I have a react app and I would like the user to be redirected to the <code>'/dashboard'</code> when logged in and not the home route <code>'/'</code>. I have accomplished this with the <code>'/login'</code> route, but cannot get it to do the same for the <code>'/'</code> home route.</p>
  <p>Any help or insight would be appreciated</p>
  <p>occasionally when playing around I get the infinite loop error from React</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { useSelector, useDispatch } from &quot;react-redux&quot;;
  import { Auth } from &quot;aws-amplify&quot;;
  import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    Redirect,
  } from &quot;react-router-dom&quot;;
  import { Provider } from &quot;react-redux&quot;;
  import ProtectedRoute from &quot;./Utils/ProtectedRoute&quot;;
  import PublicRoutes from &quot;./Utils/PublicRoute&quot;;
  import { AuthState, onAuthUIStateChange } from &quot;@aws-amplify/ui-components&quot;;
  import store from &quot;./store&quot;;
  import { userLogIn, userLogOut } from &quot;./Actions/userActions&quot;;
  import NavBar from &quot;./Components/NavBar&quot;;
  import Home from &quot;./Screens/Home&quot;;
  import AmplifySignUp from &quot;./Components/AmplifyLogIn&quot;;
  import Dashboard from &quot;./Screens/Dashboard&quot;;
  
  const Routes = (props) =&gt; {
    const [authState, setAuthState] = useState();
    const [user, setUser] = useState();
    const [userName, setUserName] = useState();
  
    const dispatch = useDispatch();
    const userState = useSelector((s) =&gt; s.user);
  
    useEffect(() =&gt; {
      return onAuthUIStateChange((nextAuthState, authData) =&gt; {
        setAuthState(nextAuthState);
        setUser(authData);
      });
    });
  
    useEffect(() =&gt; {
      if (AuthState.SignedIn &amp;&amp; user) {
        dispatch(userLogIn(user.attributes.email));
      }
    }, [user]);
    useEffect(() =&gt; {
      if (authState !== AuthState.SignedIn) {
        dispatch(userLogOut());
      }
    }, [user]);
  
    // check auth
  
    
    const isAuth = async () =&gt; {
      try {
        const status = await Auth.currentAuthenticatedUser();
      
          
          return status.username;
    
      } catch (err) {}
    };
  
  //   Auth.currentAuthenticatedUser()
  //     .then((user) =&gt; {
  //       console.log(user.username)
  //       setUserName(prevState =&gt; {
  //           if(prevState !== user.username){
  //               return user.username
  //           }else {return prevState}
  //       } 
  //     )
  //     })
      
  //     .catch((err) =&gt; console.log(err));
  
   
  
    return (
      &lt;Router&gt;
        &lt;NavBar /&gt;
        &lt;Switch&gt;
          &lt;Route exact path=&quot;/&quot;&gt;
            {userName ? &lt;Redirect from='/' to=&quot;/dashboard&quot; /&gt; : &lt;Home /&gt;}
          &lt;/Route&gt;
  
          &lt;Route path=&quot;/login&quot;&gt;
            {authState === AuthState.SignedIn &amp;&amp; user ? (
              &lt;Redirect to=&quot;/dashboard&quot; /&gt;
            ) : (
              &lt;AmplifySignUp /&gt;
            )}
          &lt;/Route&gt;
          &lt;ProtectedRoute path=&quot;/dashboard&quot; user={user}&gt;
            &lt;Dashboard /&gt;
          &lt;/ProtectedRoute&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    );
  };
  
  export default Routes;
  </code></pre>
  <h3>ProtectedRoutes.js</h3>
  <pre><code>import React from &quot;react&quot;;
  import { Route, Redirect } from &quot;react-router-dom&quot;;
  import { useSelector, useDispatch } from &quot;react-redux&quot;;
  
  const ProtectedRoutes = ({user, children, ...rest }) =&gt; {
    console.log(user &amp;&amp; user)
    return (
      &lt;Route
        {...rest}
        render={() =&gt; {
          return user ? (
            children
          ) : (
            &lt;Redirect
              to='/'
            /&gt;
          );
        }}
      /&gt;
    );
  };
  
  export default ProtectedRoutes;
  </code></pre>