react-router（v4）如何回去？

試圖弄清楚我該如何回到上一頁。我使用[react-router-v4][1]react-router（v4）如何回去？

這是我在第一次登陸頁面中配置的代碼：

<Router> 
    <div> 
    <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link> 
    <Route exact path="/" component={Page1}/> 
    <Route path="/Page2" component={Page2}/> 
    <Route path="/Page3" component={Page3}/> 
    </div> 
</Router>

爲了轉發到隨後的頁面，我簡單地做：

然而，如何我可以回到上一頁嗎？試過幾件事情像下文提到的，但沒有運氣： 1. this.props.history.goBack();

給出錯誤：

TypeError: null is not an object (evaluating 'this.props')

this.context.router.goBack();

給出錯誤：

TypeError: null is not an object (evaluating 'this.context')

this.props.history.push('/');

給出錯誤：

TypeError: null is not an object (evaluating 'this.props')

在這裏張貼的Page1代碼如下：

import React, {Component} from 'react'; 
import {Button} from 'react-bootstrap'; 

class Page1 extends Component { 
    constructor(props) { 
    super(props); 
    this.handleNext = this.handleNext.bind(this); 
    } 


    handleNext() { 
    this.props.history.push('/page2'); 
    } 

    handleBack() { 
    this.props.history.push('/'); 
    } 


    /* 
    * Main render method of this class 
    */ 
    render() { 
    return (
     <div> 
     {/* some component code */} 


     <div className="navigationButtonsLeft"> 
      <Button onClick={this.handleBack} bsStyle="success">&lt; Back</Button> 
     </div> 
     <div className="navigationButtonsRight"> 
      <Button onClick={this.handleNext} bsStyle="success">Next &gt;</Button> 
     </div> 

     </div> 
    ); 
    } 


export default Page1;

來源

2017-10-11 Akshay Lokur

什麼幾件事情，你有試過嗎？ –

嘗試 'this.props.history.goBack（）;' https://github.com/ReactTraining/react-router/blob/dc2149ec0c63bfc95b71e40c81431e34cfbfeda9/packages/react-router-redux/modules/actions.js#L27 – baskax

@VivekDoshi：添加了什麼我想隨着錯誤，我遇到 –

列出我認爲這個問題是有約束力的：

constructor(props){ 
    super(props); 
    this.goBack = this.goBack.bind(this); // i think you are missing this 
} 

goBack(){ 
    this.props.history.goBack(); 
} 

..... 

<button onClick={this.goBack}>Go Back</button>

正如我假定您發佈的前代碼：

constructor(props) { 
    super(props); 
    this.handleNext = this.handleNext.bind(this); 
    this.handleBack = this.handleBack.bind(this); // you are missing this line 
}

來源

2017-10-11 06:53:25

嘗試：

this.props.router.goBack()

來源

2017-10-11 06:43:00 Rodius

這給了我錯誤，請參閱上面更新的問題上面 –

你從哪裏得到你的路由器或歷史道具？確保你從渲染函數的父組件或頁面（例如console.log（this.props））獲取它，並檢查你是否打印路由器通道以便能夠使用它。在你的組件中沒有路由器 – Rodius

這個問題沒有提供答案，一旦你有足夠的[聲望]（https://stackoverflow.com/help/whats-reputation），你將能夠[評論任何帖子]（https://stackoverflow.com/help/privileges/comment）;相反，[提供不需要提問者澄清的答案]（https://meta.stackexchange.com/questions/214173/why （來自評論]（/ review/low-quality-posts/17590666） –

你能否提供在您使用的代碼this.props.history.push('/Page2');？

您是否嘗試過的GoBack（）方法？

this.props.history.goBack();

它在這裏https://reacttraining.com/react-router/web/api/history

拍一部活生生的例子https://reacttraining.com/react-router/web/example/modal-gallery

來源

2017-10-11 06:44:18

這給了我錯誤，請給我一個錯誤信息看到更新的問題 –

你也可以在'this.props.history.push（'/ Page2'）中添加代碼嗎？'如果'this.props'不爲null，它應該可以工作。 –

沒有什麼是真的，我只需點擊我的組件中的後退按鈕就可以調用它 –

react-router（v4）如何回去？

回答

相關問題