Entrar Ainda não tem acesso?
2
respostas

Enviando e recuperando parametros pela URL

Referente ao curso React parte 2: Container components e o ciclo de vida do react, no capítulo Lidando com a autenticação do usuário e atividade 4- Protegendo urls e possibilitando o logout

por Felipe Olavo Manente
| 33k xp | 5 posts

Conforme visto na aula o professor orientou a passar a mensagem para o usuário via URL caso ele não possa acessar determinada rota. Estou utilizando a: "react-router": "^5.1.2", "react-router-dom": "^5.1.2", e utilizei esta lógica:

function authenticated() {
    if (localStorage.getItem('auth-token') === null) {
        return <Redirect to={{
            pathname: '/',
            state:{msg:'usuário não autenticado'}
        }}/>
    }
    return <App/>;
}

e no Login peguei a mensagem desta maneira:

this.state = {msg: props.location.state.msg};

se tento acessar a rota "/timeline" sem estar logado funciona perfeitamente, porém ao acessar a rota "/" diretamente eu tenho problemas, vai me retornar o erro : TypeError: Cannot read property 'msg' of undefined, e realmente ao iniciar a rota "/" pela primeira vez a propriedade ainda não existe.

Como posso contornar isso?

2 respostas
por Daniel Omnion
| 1015.4k xp | 1150 posts

Uma forma de contornar seria fazer da seguinte forma:

this.state = {msg: ""};
if (props.location.state.msg){
    this.setState ({msg: props.location.state.msg});
}
por Felipe Olavo Manente
| 33k xp | 5 posts

eu havia tentado fazer isso mas ele me retornou o mesmo erro:

TypeError: Cannot read property 'msg' of undefined
new Login
src/components/Login.js:9
   6 | 
   7 |     super(props);
   8 |     this.state = {msg: ''};
>  9 |     if(props.location.state.msg) {
     | ^  10 |         this.setState({msg: props.location.state.msg});
  11 |     }
  12 | }