title: React router dom v5 history.push does not render new page
body: <p>I need to redirect user to their profile page after logging in and tried using history.push() inside Axios then. This is my code for the sign in form. I use the onClick button to get the email and password of user, and then redirect them to the new page, ClientProfile:</p>
  <p><strong>SignIn.js</strong></p>
  <pre><code>import React from 'react';
  import {Form, Button} from 'react-bootstrap';
  import { useState } from 'react';
  import Axios from 'axios';
  import { useHistory } from 'react-router-dom';
  
  function SignIn() {
  
      const history = useHistory();
  
    const [userEmail, setEmail] = useState(&quot;&quot;);
    const [userPassword, setPassword] = useState(&quot;&quot;);
  
  //after onClick
    const signIn = () =&gt; {
  
  //get user input
      Axios.post(&quot;http://localhost:8800/signIn&quot;, {
        userEmail: userEmail,
        userPassword: userPassword,
      }).then((res) =&gt; {
          console.log(res);
          history.push('/clientprofile');
    })};
  
      return (
          &lt;Form&gt;
              &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;formBasicEmail&quot;&gt;
                  &lt;Form.Label&gt;Email address&lt;/Form.Label&gt;
                  &lt;Form.Control type=&quot;email&quot; placeholder=&quot;Enter your email here&quot;  
                          onChange = {(event) =&gt; {
                            setEmail(event.target.value);
                          }}
                        /&gt;
              &lt;/Form.Group&gt;
  
              &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;formBasicPassword&quot;&gt;
                  &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
                  &lt;Form.Control type=&quot;password&quot; placeholder=&quot;Enter your password here&quot; 
                      onChange = {(event) =&gt; {
                        setPassword(event.target.value);
                      }}
                      /&gt;
              &lt;/Form.Group&gt;
              
              &lt;Button variant=&quot;primary&quot; type=&quot;submit&quot; onClick={ signIn }&gt;
                  Submit
              &lt;/Button&gt;
          &lt;/Form&gt;
      )
  }
  
  export default SignIn;
  </code></pre>
  <p>I define the route in <strong>app.js</strong> here:</p>
  <pre><code>import './App.css';
  import { Navbar, Nav, Container, Image } from 'react-bootstrap';
  import About from './Components/About';
  import Services from './Components/Services';
  import Help from './Components/Help';
  import SignIn from './Components/SignIn';
  import ClientProfile from './Components/ClientProfile';
  import { Switch, Route, NavLink } from 'react-router-dom';
  
  function App() {
  
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Navbar className=&quot;mainNav&quot;&gt;
                  &lt;Container&gt;
                          &lt;Nav className=&quot;right-side me-auto&quot;&gt;
                              &lt;Nav.Link as = {NavLink} to = '/' className=&quot;text-white p-3&quot;&gt;About Us&lt;/Nav.Link&gt;
                              &lt;Nav.Link as = {NavLink} to = '/ourservices' className=&quot;text-white p-3&quot;&gt;Our Services&lt;/Nav.Link&gt;
                              &lt;Nav.Link as = {NavLink} to = '/help' className=&quot;text-white p-3&quot;&gt;Help&lt;/Nav.Link&gt;
                              &lt;Nav.Link as = {NavLink} to = '/signin' className=&quot;rounded-pill m-1 px-3 py-2 text-white signInBtn&quot;&gt;Sign In&lt;/Nav.Link&gt;
                          &lt;/Nav&gt;
                  &lt;/Container&gt;
        &lt;/Navbar&gt;
        &lt;br/&gt;
        
        &lt;Switch&gt;
          &lt;Route exact path = &quot;/&quot;&gt;&lt;About /&gt;&lt;/Route&gt;
          &lt;Route path = &quot;/ourservices&quot; &gt;&lt;Services /&gt;&lt;/Route&gt;
          &lt;Route path = &quot;/help&quot; &gt;&lt;Help /&gt;&lt;/Route&gt;
          &lt;Route path = &quot;/signin&quot;&gt;&lt;SignIn /&gt;&lt;/Route&gt;
  
  //the route is being defined here
          &lt;Route path = &quot;/clientprofile&quot;&gt;&lt;ClientProfile/&gt;&lt;/Route&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>however, it does not render a new page and instead it stays on the same page, which is Sign In page. can anyone help me?</p>