0

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);
                });                  
            }
Baba
  • 2,059
  • 8
  • 48
  • 81
  • 1
    Check out this answer. It explains everything. https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-the-new-react-router-dom-of-reactjs . I could write an answer specifically for you, but I think this covers it... –  Mar 12 '19 at 21:29
  • i don't want to use redirect. cant push work? – Baba Mar 12 '19 at 21:32
  • Have you wrap the component inside `withRouter()` yet? – Brian Le Mar 12 '19 at 21:32
  • Yeah. I missed wrapping it withRouter. I will do that now. – Baba Mar 12 '19 at 21:44

1 Answers1

1

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.

:)

Sinane
  • 1,614
  • 2
  • 12
  • 17