How can I redirect the user after REST request is resolved

Question

I'm trying to redirect the user to the Profile page if the login is successful.

I've tried using the React router redirect as so:

signInWithEmailAndPassword = (username, password) => {
  return new Promise((resolve, reject) => {
    axios.post(process.env.REACT_APP_BACK_END_DOMAIN + urls.LOGIN, {
      username,
      password,
    },
    {
      headers: {
        'X-CSRFTOKEN': Cookies.get("csrftoken"),
      }
    }).then(response => {
        console.log(response);
        if(response.status =='200'){
          return <Redirect to='/profile' />
        }
    });
  });
};

But when the login is successful nothing happens.

I don't know what am I doing wrong.

Not important, the status code in the console.log is 200 and the login is successful in the back end. — Octavian, Sep 23 '19 at 13:13
Instaed of `Redirect` try `this.props.history.push('/profile')`. — ravibagul91, Sep 23 '19 at 13:26
Possible duplicate of [What is the best way to redirect a page using React Router?](https://stackoverflow.com/questions/45089386/what-is-the-best-way-to-redirect-a-page-using-react-router) — JulienRioux, Sep 23 '19 at 15:44

score 2 · Accepted Answer · answered Sep 23 '19 at 13:21

2

If you are using React Router 4, then you need to use push method on history object or write inside render function

import history from '../history';

history.push('/profile');

answered Sep 23 '19 at 13:21

tarzen chugh

10,561
4
20
30

score 0 · Answer 2 · answered Sep 23 '19 at 13:21

0

I achieved this in following way.

1) take a state value like this.state = {redirectStatus : false}

2) as you are checking status code, set the state to true like so this.setState({redirectStatus :true})(if status code is 200)

3) finally you can do some thing like this outside the promise

if(redirectStatus ) {
return <Redirect to='/profile' />
}

answered Sep 23 '19 at 13:21

Guruprasad

753
6
23

There is not state in that component, it's purely functional – Octavian Sep 23 '19 at 14:32
@octa Than you can use the hooks to achieve the same, forgot to mention that. – Guruprasad Sep 24 '19 at 05:22

How can I redirect the user after REST request is resolved

2 Answers2