history and preventDefault if undoing!

Question

So guys the problem is the following I take some data I go in the database and check if the person can authenticate, however I use the preventDefault() for the page not to update and the data not to be lost, my problem is: it seems that the history cannot load the page with the preventDefault and if I take out I lose the data, I wonder if there is any solution to it. or I will have to use some different strategy.

export default function LoginCard() {
  const [email, setEmail] = useState('digite seu email')
  const [password, setPassword] = useState('digite seu password')


  async function handleSubmit(e) {
    e.preventDefault();
    try {
      await api.post('/autentication', {
        email,
        password
      })
    } catch (error) {
      return console.log("error", error)
    }
    history.push('/areadoaluno')
  }



  return ( <
    ContainerLogin >

    <
    LoginMenu >
    <
    ContainerImg >
    <
    img src = "https://i.imgur.com/Aaeevvn.png"
    alt = "logo-sieve" / >
    <
    /ContainerImg> <
    Formulario >
    <
    form onSubmit = {
      handleSubmit
    } >
    <
    Inputs >
    <
    GoPerson size = "28px" / > < input value = {
      email
    }
    onChange = {
      e => setEmail(e.target.value)
    }
    type = "email"
    name = "email" / >
    <
    /Inputs> <
    br / >
    <
    br / >
    <
    Inputs >
    <
    FaLock size = "28px" / > < input value = {
      password
    }
    onChange = {
      e => setPassword(e.target.value)
    }
    type = "password"
    name = "password" / >
    <
    /Inputs> <
    br / >
    <
    div >
    <
    a href = "www.google.com" > Esqueceu sua senha ? < /a> <
    /div> <
    br / >
    <
    div >
    <
    input type = "checkbox"
    name = "check" / > < span > Mantenha - me conectado < /span> <
    /div> <
    br / >
    <
    br / >
    <
    Realysub >
    <
    button className = "Login"
    type = "submit" > Login < /button> <
    Link to = "/form" > < button className = "Register" > Cadastro < /button></Link >
    <
    /Realysub> <
    /form> <
    /Formulario> <
    /LoginMenu> <
    /ContainerLogin>

  );
}

Answer 1

Event.preventDefault and history have no conflict between them, I noticed that you are using Reacthooks, to use the history.push({route}), you need to call his function as per the documentation: History push documentation.

You must:

1. Import the useHistory: import { useHistory } from "react-router-dom";
2. Assign this function to a variable called history: const history = useHistory();

Your code should look like this:

import { useHistory } from "react-router-dom"; // Importar o useHistory

export default function LoginCard() {
  const [email, setEmail] = useState('digite seu email')
  const [password, setPassword] = useState('digite seu password')
  
  const history = useHistory(); // Fazer a chamada da função history

  async function handleSubmit(e) {
    e.preventDefault();
    try {
      await api.post('/autentication', {
        email,
        password
      })
    } catch (error) {
      return console.log("error", error)
    }
    history.push('/areadoaluno')
  }



  return ( <
    ContainerLogin >

    <
    LoginMenu >
    <
    ContainerImg >
    <
    img src = "https://i.imgur.com/Aaeevvn.png"
    alt = "logo-sieve" / >
    <
    /ContainerImg> <
    Formulario >
    <
    form onSubmit = {
      handleSubmit
    } >
    <
    Inputs >
    <
    GoPerson size = "28px" / > < input value = {
      email
    }
    onChange = {
      e => setEmail(e.target.value)
    }
    type = "email"
    name = "email" / >
    <
    /Inputs> <
    br / >
    <
    br / >
    <
    Inputs >
    <
    FaLock size = "28px" / > < input value = {
      password
    }
    onChange = {
      e => setPassword(e.target.value)
    }
    type = "password"
    name = "password" / >
    <
    /Inputs> <
    br / >
    <
    div >
    <
    a href = "www.google.com" > Esqueceu sua senha ? < /a> <
    /div> <
    br / >
    <
    div >
    <
    input type = "checkbox"
    name = "check" / > < span > Mantenha - me conectado < /span> <
    /div> <
    br / >
    <
    br / >
    <
    Realysub >
    <
    button className = "Login"
    type = "submit" > Login < /button> <
    Link to = "/form" > < button className = "Register" > Cadastro < /button></Link >
    <
    /Realysub> <
    /form> <
    /Formulario> <
    /LoginMenu> <
    /ContainerLogin>

  );
}