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.

First of all it should be `onClick={this.setPlanId}`. Then are you sure you can use `BrowserRouter` this way? — Yury Tarabanko, Jun 15 '17 at 11:51
Possible duplicate of [how-to-navigate-dynamically-using-react-router-dom](https://stackoverflow.com/questions/44137774/how-to-navigate-dynamically-using-react-router-dom) — Mayank Shukla, Jun 15 '17 at 11:54
@MayankShukla , yes its duplicate and I applied same `import { withRouter} from 'react-router-dom'; ` and `this.props.history.push("/do-payment");` in respective function. .............but its redirecting automatically without on click event... — Atul, Jun 15 '17 at 12:02
actually I am passing value to function to set in localStorage. Please check updated code in question. — Atul, Jun 15 '17 at 12:06

Mayank Shukla · Accepted Answer · 2017-06-15T12:14:44.610

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;

Programmatically navigating using react-router

1 Answers1