Reactjs 使用react路由器以编程方式导航

我试图通过按钮的

onclick

功能重定向到新页面， 但这不是重定向

这是我的密码-

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;

从“React”导入React；
从“react router dom”导入{withRouter}；
类。组件{
建造师（道具）{
超级（道具）；
document.title=“定价”；
this.setPlanId=this.setPlanId.bind（this）；
}
设置平面id（p_id）{
setItem（'plan_id'，p_id）；
//BrowserRouter.push（“/do payment”）；
this.props.history.push（“/do payment”）；
}
render（）{
返回(
继续
);  
}
}
出口违约定价；

---

请告诉我，我做错了什么。

第一个问题是重复的：

最新问题的答复

这样写：

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>
    );  
}

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

或

并从

构造函数

中删除此后不需要的方法绑定

完整代码：

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;

从“react router dom”导入{withRouter}；
类。组件{
建造师（道具）{
超级（道具）；
document.title=“定价”；
}
设置平面id（p_id）{
setItem（'plan_id'，p_id）；
this.props.history.push（“/do payment”）；
}
render（）{
返回(
this.setPlanId（somevalue）}>Contunue
);  
}
}
出口违约定价；

首先，它应该是

onClick={this.setPlanId}

。那么你确定你可以这样使用

BrowserRouter

吗？可能是@MayankShukla的重复，是的，它是重复的，我从'react router dom'应用了相同的

import{withRouter}

和

这个.props.history.push（“/dopayment”）在各自的功能中。。。。。。。。。。。。。但它会自动重定向，而无需点击事件…实际上，我正在将值传递给要在localStorage中设置的函数。请检查有问题的更新代码。
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;