import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import { Button } from 'react-bootstrap'; import NavBarManu from './NavBarManu' const Login = () => { const [name, setName] = useState(""); const [password, setPassword] = useState(""); function login() { fetch("http://localhost:3000/login?q=" + name).then((data) => { data.json().then((resp) => { console.warn("resp", resp) if (resp.length > 0) { localStorage.setItem('login', JSON.stringify(resp)) //Facing error console.warn(this.props.history.push('list')) } else { alert("Please check username and password") } }) }) } return ( <div> <br /><h2>Please Login !</h2><br /> <input type="text" placeholder="enter name" name="user" onChange={(event) => setName(event.target.value)} /> <br /> <br /> <input placeholder="enter password" type="password" name="password" onChange={(event) => setPassword(event.target.value)} /> <br /> <br /> <button onClick={() => { login() }} >Login</button> </div> ); }; export default Login;

Tengo un error en console.warn(this.props.history.push('list')). La sintaxis es para componente de clase. Es por eso que está mostrando error. Me enfrento a algunas dificultades para implementarlo en componentes funcionales. Después de que el usuario presione el botón de inicio de sesión, quiero que la página se dirija a la página de "lista". Por favor ayuda . Dar una solución a esto. Alguien solucione este error. Si hay alguna otra manera mejor de abordar esto, dígaselo.