使用 react-router 以编程方式导航

Question

我正在尝试通过按钮的 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;

请让我知道我做错了什么。

Answer 1

第一个问题重复了：

更新问题的答案。

这样写：

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 期待一个 function 但是你通过调用那个函数来赋值，你不需要调用那个方法它每当用户点击它时都会被调用。

像这样使用arrow function：

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

或

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

并从 constructor 中删除此后不再需要的方法绑定。

完整代码：

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 以编程方式导航

Programmatically navigating using react-router

reactjs

react-router

react-router-v4