title: Private route is not redirecting after condition satisfy
body: <p>my privateroute is not redirecting afetr condition is satisfied. in my case when admin click on login it has to check wether token is in localstorage if there is not token then it has to redirect to login page and if token is there it has to redirect to home page.
  but without toke when i try to access the home page it is redirecting to login page but after login it is not redirecting to home page.
  Here is my code.</p>
  <p>App.js</p>
  <pre><code>import &quot;./App.css&quot;;
  import { BrowserRouter as Router, Routes, Route } from &quot;react-router-dom&quot;;
  import Home from &quot;./pages/Home&quot;;
  import Login from &quot;./pages/Login&quot;;
  import Register from &quot;./pages/Register&quot;;
  import { PrivateRoute } from &quot;./HOC/PrivateRoute&quot;;
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Router&gt;
          &lt;Routes&gt;
            &lt;Route
              path=&quot;/&quot;
              element={
                &lt;PrivateRoute&gt;
                  &lt;Home /&gt;
                &lt;/PrivateRoute&gt;
              }
            /&gt;
            &lt;Route exact path=&quot;/login&quot; element={&lt;Login /&gt;} /&gt;
            &lt;Route exact path=&quot;/register&quot; element={&lt;Register /&gt;} /&gt;
          &lt;/Routes&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>PrivateRoute.js</p>
  <pre><code>import { Navigate } from &quot;react-router-dom&quot;;
  
  export function PrivateRoute({ children }) {
    if (localStorage.getItem(&quot;token&quot;)) {
      return children;
    } else {
      return &lt;Navigate to=&quot;/login&quot; replace /&gt;;
    }
  }
  </code></pre>
  <p>Login.js</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Layout from &quot;../components/Layout/Layout&quot;;
  import { Container, Form, Button, Row, Col } from &quot;react-bootstrap&quot;;
  import Input from &quot;../components/UI/Input&quot;;
  import { login } from &quot;../redux/actions&quot;;
  import { useDispatch, useSelector } from &quot;react-redux&quot;;
  import { Navigate } from &quot;react-router-dom&quot;;
  
  function Login(props) {
    const [email, setEmail] = useState(&quot;&quot;);
    const [userPassword, setUserPassword] = useState(&quot;&quot;);
    const [error, setError] = useState(&quot;&quot;);
    const auth = useSelector((state) =&gt; state.auth);
    const dispatch = useDispatch();
    const userLogin = (e) =&gt; {
      e.preventDefault();
      const user = {
        email,
        userPassword,
      };
      dispatch(login(user));
    };
  
    return (
      &lt;Layout&gt;
        &lt;Container&gt;
          &lt;Row style={{ marginTop: &quot;100px&quot; }}&gt;
            &lt;Col md={{ span: 6, offset: 3 }}&gt;
              &lt;Form onSubmit={userLogin}&gt;
                &lt;Input
                  label=&quot;Email&quot;
                  type=&quot;text&quot;
                  placeholder=&quot;email&quot;
                  valu={email}
                  onChange={(e) =&gt; setEmail(e.target.value)}
                /&gt;
                &lt;Input
                  label=&quot;Password&quot;
                  type=&quot;password&quot;
                  placeholder=&quot;Password&quot;
                  valu={userPassword}
                  onChange={(e) =&gt; setUserPassword(e.target.value)}
                /&gt;
                &lt;Button variant=&quot;primary&quot; type=&quot;submit&quot;&gt;
                  Submit
                &lt;/Button&gt;
              &lt;/Form&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
      &lt;/Layout&gt;
    );
  }
  
  export default Login;
  </code></pre>
  <p>auth.actions.js</p>
  <pre><code>import axios from &quot;../../helpers/axios&quot;;
  import { authConstants } from &quot;./constants&quot;;
  
  export const login = (user) =&gt; {
    console.log(user);
    return async (dispatch) =&gt; {
      dispatch({ type: authConstants.LOGIN_REQUEST });
      const res = await axios.post(&quot;/auth/admin/login&quot;, { ...user });
      console.log(res);
      if (res.status === 200) {
        const { accessToken, ...user } = res.data;
        localStorage.setItem(&quot;token&quot;, accessToken);
  
        dispatch({
          type: authConstants.LOGIN_SUCCESS,
          payload: { user, accessToken },
        });
      } else {
        if (res.status === 400) {
          dispatch({
            type: authConstants.LOGIN_FAILURE,
            payload: {
              error: res.data.error,
            },
          });
        }
      }
    };
  };
  </code></pre>
  <p>auth.reducers.js</p>
  <pre><code>import { authConstants } from &quot;../actions/constants&quot;;
  
  const initialState = {
    token: null,
    user: {
      firstName: &quot;&quot;,
      lastName: &quot;&quot;,
      email: &quot;&quot;,
      picture: &quot;&quot;,
    },
    authenticate: false,
    authenticating: false,
  };
  
      export default (state = initialState, action) =&gt; {
        console.log(action);
        switch (action.type) {
          case authConstants.LOGIN_REQUEST:
            state = {
              ...state,
              authenticating: true,
            };
            break;
      
          case authConstants.LOGIN_SUCCESS:
            state = {
              ...state,
              user: action.payload.user,
              token: action.payload.accessToken,
              authenticate: true,
              authenticating: false,
            };
        }
        return state;
      };
  </code></pre>
  <p>Constants.js</p>
  <pre><code>export const authConstants = {
    LOGIN_REQUEST: &quot;LOGIN_REQUEST&quot;,
    LOGIN_FAILURE: &quot;LOGIN_FAILURE&quot;,
    LOGIN_SUCCESS: &quot;LOGIN_SUCCESS&quot;,
  };
  </code></pre>