title: React-Router v5 not redirecting if accessing specific route using history.push
body: <p>In my react app I have <code>/lead-manager</code> route, <code>/login</code> route
  and there is <code>/</code> route, latter which is the <code>app.js</code> itself that I don't want anyone to access, if someone just goes to the <code>/</code> route I wanted them to redirect to <code>/lead-manager</code> route. 
  So this is what I did according to the solution given 
  <a href="https://stackoverflow.com/questions/34735580/how-to-do-a-redirect-to-another-route-with-react-router">here</a>. </p>
  
  <p>My app.jsx part</p>
  
  <pre><code>import {
    BrowserRouter as Switch,
    useHistory,
    Route,
    useLocation,
  } from "react-router-dom";
  
  const App = ({ confirmAuthentication }) =&gt; {
    let location = useLocation();
    let history = useHistory();
  
    useEffect(() =&gt; {
      async function fetchIt() {
        if (localStorage.jwt !== undefined) {
          confirmAuthentication();
        }
      }
      fetchIt();
      if (location.pathname === "/") {
        history.push("lead-manager");
      }
    }, []);
   return (
      &lt;div&gt;
        &lt;Switch&gt;
          &lt;Route exact path="/testing"&gt;
            &lt;TestingComponent /&gt;
          &lt;/Route&gt;
          &lt;PrivateRoute path="/lead-manager" component={LeadApp} /&gt;
          &lt;Route exact path="/login"&gt;
            &lt;LoginView /&gt;
          &lt;/Route&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>The output I'm getting when I'm accessing <code>/</code> path is <code>/lead-manager</code> in the URL. Which is the desired one, but the component doesn't render accordingly with components defined in <code>/lead-manager</code> route. It just stays on <code>/</code> route even though URL shows <code>/lead-manager</code></p>
  
  <p>Hope this is clear</p>