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.
My RouterClass:
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 (
<Router>
<Routes>
<Route exact path="/" element={<Login />} />
<Route
path="/home"
element={<PrivateOutlet />}
>
<Route path="" element={<HomePage />} />
</Route>
<Route
path="/user"
element={<PrivateOutlet />}
>
<Route path="" element={<UsersPage />} />
</Route>
<Route path="*" element={<h1>NOT FOUND</h1>} />
</Routes>
</Router>
)
}
My Login Index page (i've tried to use useNavigate, but doesn't work):
import React, { Component } from "react";
import Wrapper from "../../../components/Wrapper";
import "./style.css"
import logo from "../../../assets/icons/logotipo_semfundo.png"
import Button from "@material-ui/core/Button";
import { MdEmail, MdLock } from "react-icons/md"
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 => {
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 => {
if(response.ok) {
return response.json()
}
throw new Error('Login Inválido...')
}).then(token => {
localStorage.setItem('accessToken', token)
this.props.history.push({pathname: '/home'})
// Navi("/home")
return
}).catch(e => (this.setState({message: e.message})))
}
render() {
return (
<Wrapper className="login">
<Wrapper className="login-img">
<img src={logo} alt="logo" />
</Wrapper>
<Wrapper className="login-form">
<h1 className="h1" >Login</h1>
{
this.state.message !== '' ? (
<span color="black">{this.state.message}</span>
): ''
}
<form id="loginForm">
<Wrapper>
<Wrapper>
<MdEmail />
<input
id="email"
type="text"
name="email"
placeholder="Digite um E-mail"
onChange={e => this.email = e.target.value}
></input>
</Wrapper>
<Wrapper>
<MdLock />
<input
id="password"
type="password"
name="password"
placeholder="Senha"
onChange={e => this.password = e.target.value}
></input>
</Wrapper>
<Wrapper>
<Button
// label="Submit"
// type="submit"
// form="loginForm"
onClick={this.signIn}
block="true"
color="primary"
>
Submit
</Button>
</Wrapper>
</Wrapper>
</form>
</Wrapper>
</Wrapper>
)
}
}
export default Login
My Auth Page:
import React from 'react'
import { Navigate, Outlet } from 'react-router-dom'
const isAuth = () => {
if (localStorage.getItem('accessToken') !== null) {
console.log("AUX", localStorage.getItem('accessToken'))
return false
}
return true
}
const PrivateOutlet = () => {
return (
isAuth() ? <Outlet />
: <Navigate
to={{
pathname: '/',
state: { message: 'Usuário não autorizado' }
}}
/>
)
}
export default PrivateOutlet
Meu package Packages.json:
{
"name": "pingpong-dashboardadmin",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.3",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"js-cookie": "^3.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.2",
"react-router-redux": "^4.0.8",
"react-scripts": "4.0.3",
"react-vis": "^1.11.7",
"redux": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
