react-router (v4) comment revenir en arrière?

Question

Essayer de comprendre comment je peux revenir à la page précédente. J'utilise [react-router-v4][1]

Ceci est le code que j'ai configuré dans ma première page de destination:

<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> 

Afin de transmettre aux pages suivantes, je fais simplement:

Cependant, comment puis-je revenir à la page précédente? Essayé peu de choses comme mentionné ci-dessous, mais pas de chance: 1. this.props.history.goBack();

donne l'erreur:

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

2. this.context.router.goBack();

donne l'erreur:

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

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

donne l'erreur:

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

affichage du code Page1 ci-dessous:

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; 

Answer 1

Je pense que la question est à la liaison:

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> 

Comme je l'ai pris avant que vous avez publié le code:

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

Answer 2

Essayez:

this.props.router.goBack() 

Answer 3

Pouvez-vous fournir le code où vous utilisez this.props.history.push('/Page2');?

Avez-vous essayé la méthode goBack()?

this.props.history.goBack();

Il est répertorié ici https://reacttraining.com/react-router/web/api/history

Avec un exemple vivant ici https://reacttraining.com/react-router/web/example/modal-gallery