以編程方式導航使用react-router

我試圖通過onclick函數重定向到新頁面，按鈕但它沒有重定向。以編程方式導航使用react-router

這裏是我的代碼 -

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;

請讓我知道，我在做什麼錯。

來源

2017-06-15 Atul

首先，它應該是'的onClick = {this.setPlanId}'。那你確定你可以這樣使用'BrowserRouter'嗎？ –

[how-to-navigate-dynamic-using-react-router-dom]可能的重複（https://stackoverflow.com/questions/44137774/how-to-navigate-dynamically-using-react-router-dom） –

@MayankShukla，是它的重複，我從'react-router-dom'應用了相同的'import {withRouter}; '和'this.props.history.push（「/ do-payment」）;'在相應的函數中。 .............但其重定向自動無需點擊事件... – Atul

第一個問題是重複的：How to navigate dynamically using react router dom

回答更新疑問句的。

寫這樣的：

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;

來源

2017-06-15 12:08:05

以編程方式導航使用react-router

回答

相關問題