CODEWITHSUNDEEP
reactjsreact-routerfetch
JamieTom
JamieTom

Reputation: 111

React Redirect in Fetch

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

....

Upvotes: 2

Views: 5093

Answers (1)

zooblin
zooblin

Reputation: 2490

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

Upvotes: 1

Related Questions