Enviando e recuperando parametros pela URL | React parte 2: Container components e o ciclo de vida do react

2
respostas

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

| 1014.4k xp | 1150 posts

10/10/2019

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

10/10/2019

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 | }