title: React router dom redirect problem. Changes url, does not render component
body: <p><strong>Problem:</strong> When I use <code>history.push()</code>, I can see that browser changes url, but it does not render my component listening on the path. It only renders if I refresh a page.</p>
  
  <p><code>App.js</code> file:</p>
  
  <pre><code>import React from "react";
  import { BrowserRouter as Router, Route } from "react-router-dom";
  import { Provider } from "react-redux";
  import PropTypes from "prop-types";
  
  //Components
  import LoginForm from "../LoginForm/LoginForm";
  import PrivateRoute from "../PrivateRoute/PrivateRoute";
  import ServerList from "../ServerList/ServerList";
  
  const App = ({ store }) =&gt; {
    const isLoggedIn = localStorage.getItem("userToken");
  
    return (
      &lt;Router&gt;
        &lt;Provider store={store}&gt;
          &lt;div className="App"&gt;
            {isLoggedIn !== true &amp;&amp; (
              &lt;Route exact path="/login" component={LoginForm} /&gt;
            )}
            &lt;PrivateRoute
              isLoggedIn={!!isLoggedIn}
              path="/"
              component={ServerList}
            /&gt;
          &lt;/div&gt;
        &lt;/Provider&gt;
      &lt;/Router&gt;
    );
  };
  
  App.propTypes = {
    store: PropTypes.object.isRequired
  };
  
  export default App;
  </code></pre>
  
  <p>Inside my <code>LoginForm</code>, I am making a request to an API, and after doing my procedures, I use <code>.then()</code> to redirect my user:</p>
  
  <pre><code>.then(() =&gt; {
    props.history.push("/");
  })
  </code></pre>
  
  <p>What happens: Browser changes url from <code>/login</code> to <code>/</code>, but component listening on <code>/</code> route is not rendered, unless I reload page.</p>
  
  <p>Inside my <code>/</code> component, I use <code>useEffect()</code> hook to make another request to API, which fetches data and prints it inside <code>return()</code>. If I <code>console.log</code> inside <code>useEffect()</code> it happens twice, I assume initial one, and when I store data from an API inside component's state using <code>useState()</code> hook.</p>
  
  <p><strong>EDIT:</strong> adding <code>PrivateRoute</code> component as requested:</p>
  
  <pre><code>import React from "react";
  import { Route, Redirect } from "react-router-dom";
  
  const PrivateRoute = ({ component: Component, isLoggedIn, ...rest }) =&gt; {
    return (
      &lt;Route
        {...rest}
        render={props =&gt;
          isLoggedIn === true ? (
            &lt;Component {...props} /&gt;
          ) : (
            &lt;Redirect to={{ pathname: "/login" }} /&gt;
          )
        }
      /&gt;
    );
  };
  
  export default PrivateRoute;
  </code></pre>
  
  <p>What I tried already:
  1) Wrapping my <code>default export</code> with <code>withRouter()</code>:</p>
  
  <pre><code>export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LoginForm));
  </code></pre>
  
  <p>2) Creating custom <code>history</code> and passing it as <code>prop</code> to <code>Router</code>.</p>
  
  <p><code>react-router-dom</code> version is <code>^5.0.1</code>. <code>react-router</code> is the same, <code>5.0.1</code></p>