title: Cannot read properties of undefined (reading 'push') - React Login Class
body: <p>I'am trying to use a Login authentication, but i got this error: Cannot read properties of undefined (reading 'push'). Im using React V6. The app is fxing on login page correctly but the error came when i get the authentication.</p>
  <p>My RouterClass:</p>
  <pre><code>import React from 'react';
  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
  import HomePage from './App/pages/HomePage'
  import UsersPage from './App/pages/UsersPage'
  import Login from './App/pages/Login'
  import PrivateOutlet from './Auth'
  
  
  function RoutesController() {
      return (
          &lt;Router&gt;
              &lt;Routes&gt;
                  &lt;Route exact path=&quot;/&quot; element={&lt;Login /&gt;} /&gt;
  
                  &lt;Route
                      path=&quot;/home&quot;
                      element={&lt;PrivateOutlet /&gt;}
                  &gt;
                      &lt;Route path=&quot;&quot; element={&lt;HomePage /&gt;} /&gt;
                  &lt;/Route&gt;
  
                  &lt;Route
                      path=&quot;/user&quot;
                      element={&lt;PrivateOutlet /&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;
      )
  
  }
  </code></pre>
  <p>My Login Index page (i've tried to use useNavigate, but doesn't work):</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;
  import { useNavigate } from 'react-router-dom';
  // import { push } from 'react-router-redux'
  
  // function Navi(path){
  //     const navigate = useNavigate()
  //     navigate(path, { replace: true })
  // }
  
  
  class Login extends Component {
  
      constructor(props){
          console.log(props)
          super(props)
          this.state= {
              message: '',
          }
      }   
  
  
      signIn = async event =&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('api-link', 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: '/home'})
              // Navi(&quot;/home&quot;)            
              return                       
              
          }).catch(e =&gt; (this.setState({message: e.message})))
      }
  
      render() {
          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={this.signIn}
                                      block=&quot;true&quot;   
                                      color=&quot;primary&quot;                               
                                  &gt;
                                      Submit
                                  &lt;/Button&gt;
                              &lt;/Wrapper&gt;
                          &lt;/Wrapper&gt;
                      &lt;/form&gt;
                  &lt;/Wrapper&gt;
              &lt;/Wrapper&gt;
          )
      }
  }
  
  export default Login
  </code></pre>
  <p>My Auth Page:</p>
  <pre><code>import React from 'react'
  import { Navigate, Outlet } from 'react-router-dom'
  
  const isAuth = () =&gt; {
      if (localStorage.getItem('accessToken') !== null) {    
          console.log(&quot;AUX&quot;, localStorage.getItem('accessToken'))
          return false
      } 
      return true 
  }
  
  const PrivateOutlet = () =&gt; {
      return (
          isAuth() ? &lt;Outlet /&gt;
              : &lt;Navigate
                  to={{
                      pathname: '/',
                      state: { message: 'Usuário não autorizado' }
                  }}
              /&gt;
      )
  }
  
  export default PrivateOutlet
  </code></pre>
  <p>Meu package Packages.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;pingpong-dashboardadmin&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@material-ui/core&quot;: &quot;^4.12.3&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.1.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.1.10&quot;,
      &quot;js-cookie&quot;: &quot;^3.0.1&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-icons&quot;: &quot;^4.3.1&quot;,
      &quot;react-redux&quot;: &quot;^7.2.6&quot;,
      &quot;react-router-dom&quot;: &quot;^6.0.2&quot;,
      &quot;react-router-redux&quot;: &quot;^4.0.8&quot;,
      &quot;react-scripts&quot;: &quot;4.0.3&quot;,
      &quot;react-vis&quot;: &quot;^1.11.7&quot;,
      &quot;redux&quot;: &quot;^4.1.2&quot;,
      &quot;web-vitals&quot;: &quot;^1.0.1&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
  </code></pre>