Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

TypeError: Cannot read properties of undefined (reading 'push') - ERRO APRESENTADO.

por jpinto10
| 96.9k xp | 19 posts
Analista de Sistemas Desenvolvedor

Boa tarde. Não estou conseguindo navegar. O propósito é: Ao clicar(onClick) em um botão, o mesmo deve redirecionar para a página de login (digitar usuário e senha) e mudar o texto do mesmo para "logout".

Código Usado. Componente BOTTAO

import React, { useState } from 'react';
import { BtnSair } from './styles';
import { useHistory } from 'react-router-dom';

const BtSairEntrar = () =>{

    const [tituloBotao, setTituloBotao] = useState('Login')
    const history = useHistory()

    function handleLogin(){
        setTituloBotao('LogOut');
        history.push('/List')
    }

    return( 
        <BtnSair onClick={handleLogin}>
            {tituloBotao}
        </BtnSair>
    )
};

export default BtSairEntrar
1 resposta
solução!
por Lorena Garcia
| 8285.1k xp | 12128 posts
Alura Scuba Team Suporte Educacional

Olá, jpinto10, tudo bem?

Desculpe a demora em retornar.

Entendo que você esteja enfrentando um problema com um erro do tipo "TypeError: Cannot read properties of undefined (reading 'push')" ao tentar redirecionar para a página de login ao clicar em um botão e mudar o texto do botão para "logout". Esse erro geralmente ocorre quando você tenta acessar uma propriedade de um objeto que não foi definido ou não foi inicializado corretamente.

No seu caso, o erro pode estar ocorrendo porque a variável "history" não está sendo inicializada corretamente ou porque não foi importada corretamente. Você está importando a função useHistory corretamente, mas pode ser que esteja faltando a dependência "react-router-dom" no seu projeto. Certifique-se de ter importado essa dependência no seu arquivo de origem.

Além disso, sugiro que você verifique se a rota '/List' que está sendo usada para redirecionar para a página de login está correta e se a página de login está definida corretamente na sua aplicação.

Aqui está um exemplo de como você pode corrigir o erro e garantir que a variável "history" seja inicializada corretamente:

import React, { useState } from 'react';
import { BtnSair } from './styles';
import { useHistory } from 'react-router-dom';

const BtSairEntrar = () =>{
    const [tituloBotao, setTituloBotao] = useState('Login')
    const history = useHistory()

    function handleLogin(){
        setTituloBotao('LogOut');
        if (history) {
            history.push('/List')
        }
    }

    return( 
        <BtnSair onClick={handleLogin}>
            {tituloBotao}
        </BtnSair>
    )
};

export default BtSairEntrar

Aqui, adicionamos uma verificação de nullidade ("if (history)") antes de chamar a função "push" na variável "history". Dessa forma, o código só executará a função "push" se a variável "history" não for nula. Isso deve ajudar a evitar o erro que você está enfrentando.

Espero que essa resposta tenha sido útil para você.

Um abraço e bons estudos.