Programmatically navigating using react-router

Question

I am trying to redirect to new page via onclick function of a button, but its not redirecting.

Here is my code-

import React from 'react'; import { withRouter } from 'react-router-dom'; class Pricing extends React.Component { constructor(props){ super(props); document.title = "Pricing"; this.setPlanId = this.setPlanId.bind(this); } setPlanId(p_id){ localStorage.setItem('plan_id', p_id); //BrowserRouter.push('/do-payment'); this.props.history.push("/do-payment"); } render(){ return( <div> <div className="pricing bottommargin clearfix"> <Link to="#" className="btn btn-danger btn-block btn-lg bgcolor border-color" onClick={this.setPlanId(somevalue)}>Contunue</Link> </div> </div> ); } } export default Pricing; 

Please let me know, what I am doing wrong.

Answer 1

First question was duplicate of: How to navigate dynamically using react router dom

Answer of updated Ques.

Write it like this:

render(){ return( <div> <div className="pricing bottommargin clearfix"> <Link to="#" className="btn btn-danger btn-block btn-lg bgcolor border-color" onClick={() => this.setPlanId(somevalue)} > Contunue </Link> </div> </div> ); } 

Reason:onClick expect a function but you are assigning a value by calling that function, you don't need to call that method it will get called whenever user click on that.

Use arrow function like this:

onClick={() => this.setPlanId(somevalue)} 

or

onClick={this.setPlanId.bind(this, somevalue)} 

And remove the method binding from constructor that will not be required after this.

Full Code:

import { withRouter } from 'react-router-dom'; class Pricing extends React.Component { constructor(props){ super(props); document.title = "Pricing"; } setPlanId(p_id){ localStorage.setItem('plan_id', p_id); this.props.history.push("/do-payment"); } render(){ return( <div> <div className="pricing bottommargin clearfix"> <Link to="#" className="btn btn-danger btn-block btn-lg bgcolor border-color" onClick={() => this.setPlanId(somevalue)}>Contunue</Link> </div> </div> ); } } export default Pricing;