CODEWITHSUNDEEP
reactjsreact-router
Baba
Baba

Reputation: 2229

Unable to redirect to another page in react application

I have a react page with the method below. When I click the button a method studentApproval() is called. This method gets hit but I want a redirection to another page once this is done. No redirection is happening. How can I make this redirection work?

This line is not working. 

    this.props.history.push(STUDENT_FORMS_URL)

Button that gets clicked on the page 

     <Button
        onClick={() => this.studentApproval()}
        className="next-button"                    
        >
        Approve<Icon>chevron_right</Icon>
     </Button>

This resides in another file.

    export const STUDENT_FORMS_URL = '/student-forms';

Method that gets hit on the click of the button.

      studentApproval(){
              AXIOS.post(`${API}/student-forms/check-request`, {
                action: "APPROVE",
                studentFormId: myId 
                },{
                  headers: {
                    "Content-Type": "application/json"
                  }
                }).then(res => {            
                  this.props.history.push(STUDENT_FORMS_URL)    
                }).catch(err => {
                  console.log(err);
                });                  
            }

Upvotes: 0

Views: 267

Answers (1)

Sinane
Sinane

Reputation: 2010

Try to wrap your component with withRouter(), and don't forget to pass history as a prop to your Router. Without this, your router will not trigger history.push() and the app will not be updated.

:)

Upvotes: 1

Related Questions