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

Question

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

Voici le code que j'ai configuré dans ma première page de renvoi :

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

Pour passer aux pages suivantes, il suffit de le faire :

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

Cependant, comment puis-je revenir à la page précédente ? J'ai essayé plusieurs choses comme celles mentionnées ci-dessous, mais sans succès : 1. this.props.history.goBack();

Donne une erreur :

TypeError : null n'est pas un objet (évaluation de 'this.props')

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

Donne une erreur :

TypeError : null n'est pas un objet (évaluation de 'this.context')

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

Donne une erreur :

TypeError : null n'est pas un objet (évaluation de 'this.props')

Affichage de la Page1 code 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 le problème se situe au niveau de la reliure :

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 supposé avant que vous ne postiez 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

this.props.history.goBack();

Voici la solution correcte pour react-router v4

Mais une chose que vous devez garder à l'esprit est que vous devez vous assurer que this.props.history existe.

Cela signifie que vous devez appeler cette fonction this.props.history.goBack(); à l'intérieur du composant qui est enveloppé par < Route/>

Si vous appelez cette fonction dans un composant plus profond dans l'arbre des composants, elle ne fonctionnera pas.

EDIT :

Si vous voulez avoir un objet d'histoire dans le composant qui est plus profond dans l'arbre du composant (qui n'est pas enveloppé par < Route>), vous pouvez faire quelque chose comme ceci :

...
import {withRouter} from 'react-router-dom';

class Demo extends Component {
    ...
    // Inside this you can use this.props.history.goBack();
}

export default withRouter(Demo);

Answer 3

À utiliser avec React Router v4 et un composant fonctionnel n'importe où dans le dom-tree.

import React from 'react';
import { withRouter } from 'react-router-dom';

const GoBack = ({ history }) => <img src="./images/back.png" onClick={() => history.goBack()} alt="Go back" />;

export default withRouter(GoBack);

Answer 4

Chaque réponse ici contient des parties de la solution complète. Voici la solution complète que j'ai utilisée pour la faire fonctionner dans des composants plus profonds que ceux où Route a été utilisé :

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

Vous avez besoin de cette deuxième ligne pour importer la fonction et pour exporter le composant en bas de la page.

render() {
  return (
  ...
    <div onClick={() => this.props.history.goBack()}>GO BACK</div>
  )
}

^ Nécessité de la fonction flèche ou simplement onClick={this.props.history.goBack()}

export default withRouter(MyPage)

Enveloppez le nom de votre composant avec "withRouter()".

Answer 5

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 concret ici https://reacttraining.com/react-router/web/example/modal-gallery