0

galera o meu grande problema ai é o seguinte, eu outra aplicação eu usei a propriedade "history" para redirecionar para outra pagina, eu aprendi que não precisava importa nada de nenhuma lib para usar o history só era desestruturar ele na função e usar. Porém quando a atentificação passa chega na linha do "history" e da esse erro : "Unhandled Rejection (TypeError): Cannot read property 'push' of undefined". como se o history não tivesse essa função , realmente não sei como proceder, porque é a unica forma que sei chamar outra pagina passando o id e outros dados.

<script 
import React,{useState} from 'react';
import {  LoginMenu, ContainerImg, Formulario, Inputs, Realysub,ContainerLogin } from './styles';
import { GoPerson } from 'react-icons/go';
import { FaLock } from 'react-icons/fa';
import {Link} from 'react-router-dom'
import api from '../../services/api'


export default function LoginCard({history}) {
  const [email,setEmail] = useState('digite seu email')
  const[password,setPassword] = useState('digite seu password')
  
  
  async function handleSubmit(e){
      e.preventDefault();
      try {
       response = await api.post('/autentication',{email,password})
      } catch (error) {
        return console.log("error",error)
      }
      const {_id} = response.data
      history.push(`/areadoaluno/${_id}`)
  }
  
  

1

1 Resposta 1

1

O "history" existe como uma props para os componentes que foram informados na hora de criar uma rota. Se por exemplo você tem uma rota "/register" que está vinculada a um componente com o mesmo nome, a utilização dele ficaria assim:

class Register extends React.Component {
  handleSubmit = (user) => {
    saveUser(user).then(() =>
      this.props.history.push('/dashboard')
    ))
  }
}

Porem, esta props não é passada por padrão para os componentes filhos. Para o seu "LoginCard" funcionar do jeito que você programou, teria que passar as props do componente pai. A chamada no componente pai ficaria assim:

<LoginCard history={this.props.history} />

E o seu LoginCard ficaria assim:

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


  async function handleSubmit(e){
      e.preventDefault();
      try {
       response = await api.post('/autentication',{email,password})
      } catch (error) {
        return console.log("error",error)
      }
      const {_id} = response.data
      props.history.push(`/areadoaluno/${_id}`)
  }
}

Aqui tem um tutorial explicando com mais detalhes o processo e uma outra forma de fazer isso:

https://tylermcginnis.com/react-router-programmatically-navigate/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .