title: this.props.history.push() is changing the URL but not doing the action to the next page
body: <p>I'm using react-router v6. At the authentication function (singIn) at the Login page, i call the history.push. The URL changes, but dont do the action move to the correctly page, instead, remains in the login page. The authentication is working, if i click on the URL and press &quot;Enter&quot;, after the authentication, the page pushs anyway.</p>
  <p>My Index.jsx (root)</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import RoutesController from './routes';
  
  ReactDOM.render(
  
    &lt;React.StrictMode&gt;
      &lt;RoutesController /&gt;
    &lt;/React.StrictMode&gt;,
  
    document.getElementById('root')
  );
  </code></pre>
  <p>My routes.js (routes controller):</p>
  <pre><code>import React from 'react';
  import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom'
  import HomePage from './App/pages/HomePage'
  import UsersPage from './App/pages/UsersPage'
  import Login from './App/pages/Login'
  import PrivateRoute from './Auth'
  import { createBrowserHistory } from &quot;history&quot;;
  
  
  const customHistory = createBrowserHistory();
  
  
  
  function RoutesController() {   
      
      return (
          &lt;Router&gt;
              &lt;Routes&gt;
                  &lt;Route path=&quot;/&quot; element={&lt;Login history={customHistory}/&gt;} /&gt;
  
                  &lt;Route path=&quot;/home&quot; element={&lt;PrivateRoute /&gt;}&gt;
                      &lt;Route path=&quot;&quot; element={&lt;HomePage /&gt;} /&gt;
                  &lt;/Route&gt;
  
                  &lt;Route path=&quot;/users&quot; element={&lt;PrivateRoute /&gt;}&gt;
                      &lt;Route path=&quot;&quot; element={&lt;UsersPage /&gt;} /&gt;
                  &lt;/Route&gt;
  
                  &lt;Route path=&quot;*&quot; element={&lt;h1&gt;NOT FOUND&lt;/h1&gt;} /&gt;
  
              &lt;/Routes&gt;
          &lt;/Router&gt;
      )
  
  }
  
  export default RoutesController
  </code></pre>
  <p>My Login.jsx:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import Wrapper from &quot;../../../components/Wrapper&quot;;
  import &quot;./style.css&quot;
  import logo from &quot;../../../assets/icons/logotipo_semfundo.png&quot;
  import Button from &quot;@material-ui/core/Button&quot;;
  import { MdEmail, MdLock } from &quot;react-icons/md&quot;
  
  
  class Login extends Component {
  
      constructor(props) {
          super(props)
          this.state = {
              message: '',
          }
      }       
  
      signIn = () =&gt; {
  
          const data = { email: this.email, password: this.password }
  
          const requestInfo = {
              method: 'POST',
              body: JSON.stringify(data),
              headers: new Headers({
                  'Content-Type': 'application/json'
              }),
          }
  
          fetch('http://localhost:3000/api/login', requestInfo).then(response =&gt; {
              if (response.ok) {
                  return response.json()
              }
              throw new Error('Login Inválido...')
          }).then(token =&gt; {
              localStorage.setItem('accessToken', token)            
              this.props.history.push({pathname: &quot;/home&quot;, message: &quot;Ok&quot;})
              return        
              
          }
          ).catch(e =&gt; (this.setState({ message: e.message })))
      }
  
      render() {
          
          localStorage.removeItem('accessToken')
          return (
              &lt;Wrapper className=&quot;login&quot;&gt;
                  &lt;Wrapper className=&quot;login-img&quot;&gt;
                      &lt;img src={logo} alt=&quot;logo&quot; /&gt;
                  &lt;/Wrapper&gt;
  
                  &lt;Wrapper className=&quot;login-form&quot;&gt;
                      &lt;h1 className=&quot;h1&quot; &gt;Login&lt;/h1&gt;
                      {
                          this.state.message !== '' ? (
                              &lt;span color=&quot;black&quot;&gt;{this.state.message}&lt;/span&gt;
                          ) : ''
                      }
                      &lt;form id=&quot;loginForm&quot;&gt;
                          &lt;Wrapper&gt;
                              &lt;Wrapper&gt;
                                  &lt;MdEmail /&gt;
                                  &lt;input
                                      id=&quot;email&quot;
                                      type=&quot;text&quot;
                                      name=&quot;email&quot;
                                      placeholder=&quot;Digite um E-mail&quot;
                                      onChange={e =&gt; this.email = e.target.value}
                                  &gt;&lt;/input&gt;
                              &lt;/Wrapper&gt;
                              &lt;Wrapper&gt;
                                  &lt;MdLock /&gt;
                                  &lt;input
                                      id=&quot;password&quot;
                                      type=&quot;password&quot;
                                      name=&quot;password&quot;
                                      placeholder=&quot;Senha&quot;
                                      onChange={e =&gt; this.password = e.target.value}
                                  &gt;&lt;/input&gt;
                              &lt;/Wrapper&gt;
                              &lt;Wrapper&gt;
                                  &lt;Button
                                      // label=&quot;Submit&quot;
                                      // type=&quot;submit&quot;
                                      // form=&quot;loginForm&quot;
                                      onClick={() =&gt; this.signIn()}
                                      color=&quot;primary&quot;
                                  &gt;
                                      Entrar
                                  &lt;/Button&gt;
                              &lt;/Wrapper&gt;
                          &lt;/Wrapper&gt;
                      &lt;/form&gt;
                  &lt;/Wrapper&gt;
              &lt;/Wrapper&gt;
          )
  
      }
  }
  
  
  
  export default Login
  </code></pre>
  <p>The Authentication Page:</p>
  <pre><code>import React from 'react'
  import { Navigate, Outlet } from 'react-router-dom'
  
  const isAuth = () =&gt; {    
      if (localStorage.getItem('accessToken') !== null) {  
          return true
      } 
      return false 
  }
  
  const PrivateRoute = () =&gt; {
      return (
          isAuth() ? &lt;Outlet /&gt;
              : &lt;Navigate
                  to={{
                      pathname: '/',
                      state: { message: 'Usuário não autorizado' }
                  }}
              /&gt;
      )
  }
  
  export default PrivateRoute 
  </code></pre>