无法读取未定义的属性(读取"push") - React 登录类

Question

我正在尝试使用登录身份验证，但我收到了以下错误：无法读取未定义的属性(读取"push"(。我正在使用React V6。该应用程序在登录页面上正确地进行了fxing，但当我获得身份验证时出现了错误。

我的路由器类别：

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>
)
}

我的登录索引页面(我尝试过使用useNavigate，但不起作用(：

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

我的授权页面：

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包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"
]
}
}

Answer 1

您可以传递道具，比如这样，所以它现在可以访问中有历史的道具

<Route exact path="/" element={<Login {...this.props}/>} />