React Redirect in Fetch

Question

I must have this setup incorrectly because it is not working. If I put a console.log in my if statement it shows up, so I know it is getting to that point, but it is not redirecting. Am I doing this wrong...

... checkUserAuth = () => { return fetch(process.env.REACT_APP_API_URL + '/authCheck', { method: 'post', headers: { 'Content-Type': 'application/json', 'Authorization': window.localStorage.getItem('token') }, body: JSON.stringify({ itemid: this.props.itemid }) }) } render(){ this.checkUserAuth().then(response => response.json()).then(data => { if(data === 'false') { return <Redirect to='/' /> } }).catch(err => console.log(err)) ....

I'm realizing now this kind of authorization can probably be handled easier on the server side, but I still would like to know what I am doing wrong so I can better understand how this works. — JamieTom
– JamieTom, Commented Mar 8, 2019 at 20:15

zooblin · Accepted Answer · 2019-03-08 20:22:32Z

For side-effects use cases, use componentDidMount() and then update internal state that will trigger render method:

checkUserAuth = () => { return fetch(process.env.REACT_APP_API_URL + '/authCheck', { method: 'post', headers: { 'Content-Type': 'application/json', 'Authorization': window.localStorage.getItem('token') }, body: JSON.stringify({ itemid: this.props.itemid }) }) } componentDidMount() { this.checkUserAuth().then(response => response.json()).then(data => { this.setState({data}); }); } render() { if(data === 'false') { return <Redirect to='/' /> } else { ... do something else } }

Interesting. This worked, but is it advised not to do something like I am trying to do, or is it an okay practice?
Well since your component based on data that comes asynchronously from server there is no another approach, it will be much better if during fetch process user will experience any kind of loader or progress bar, but in general this is approach.

Collectives™ on Stack Overflow

React Redirect in Fetch

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related