réagir-routeur (v4) comment revenir en arrière?

À essayer de comprendre comment je peux revenir à la page précédente. Je suis à l'aide de [react-router-v4][1]

C'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 n'ai tout simplement:

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

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

Donne une erreur:

TypeError: null n'est pas un objet (l'évaluation de cela.accessoires')

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

Donne une erreur:

TypeError: null n'est pas un objet (l'évaluation de cela.contexte")

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

Donne une erreur:

TypeError: null n'est pas un objet (l'évaluation de cela.accessoires')

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;
  • Quels sont les quelques choses, vous avez essayé?
  • essayez this.props.history.goBack(); github.com/ReactTraining/react-router/blob/...
  • Ajouté ce que j'ai essayé avec les erreurs que j'ai rencontré
  • vous s'il vous plaît poster le code complet, à partir duquel vous essayez d'exécuter cette.accessoires de jeu.l'histoire.goBack();?
  • Fait, veuillez jeter un oeil, merci
  • Veuillez vérifier ma réponse vous avez oublié de ce.handleBack = ce.handleBack.bind(ce);
  • Merci, ça a fonctionné 🙂

InformationsquelleAutor Akshay Lokur | 2017-10-11
  1. 56

    Je pense que le problème est avec 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>

    Que j'ai pris avant que vous avez posté le code:

    constructor(props) {
    super(props);
    this.handleNext = this.handleNext.bind(this);
    this.handleBack = this.handleBack.bind(this); //you are missing this line
}
    InformationsquelleAutor Vivek Doshi
  2. 8
    this.props.history.goBack();

    C'est la bonne solution pour réagir-routeur v4

    Mais une chose que vous devez garder à l'esprit est que vous devez vous assurer que ce.accessoires de jeu.l'histoire est existé.

    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 qui plus profonde dans le composant de l'arbre, il ne fonctionnera pas.

    EDIT:

    Si vous voulez avoir l'histoire de l'objet dans le composant qui est plus profond dans la composante de l'arbre (ce qui n'est pas emballé 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);
    • Alors, comment cela peut-il fonctionner? Comment pouvez-vous aller en arrière dans l'histoire de n'importe où?
    • Vous pouvez revenir en arrière à partir de n'importe où. Je veux seulement dire que vous devez ajouter cette ligne de code dans le Conteneur de composants afin d'obtenir l ' "histoire" de l'objet, de ne pas utiliser cette ligne de code à partir de la Présentation des composants qui n'est pas emballé par la Route (medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
    • Salut, merci de vérifier mon édité réponse. Je pense que ça répond à votre question.
    InformationsquelleAutor piavgh
  3. 4

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

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

    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

    • Cela me donne l'erreur, consultez mise à jour de la question ci-dessus
    • Vous pouvez également ajouter le code autour de this.props.history.push('/Page2');? Si this.props n'est pas null, il devrait fonctionner.
    • Rien de vraiment, je viens de l'appeler sur ce clic de bouton de Retour dans mon Composant
    InformationsquelleAutor Alfredo Re
  4. 4

    Pour une utilisation avec Réagissent Routeur v4 et une composante fonctionnelle n'importe où dans l'arborescence dom.

    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);
    • C'est une bonne solution car il n'utilise pas un cycle de vie de la méthode. Il est aussi plus clair pour moi, car il désigne ce qui est passé à travers, dans ce cas, l'histoire de l'objet.
    InformationsquelleAutor frippera
  5. 0

    Essayer: 

    this.props.router.goBack()
    • Cela me donne l'erreur, consultez mise à jour de la question ci-dessus
    • où en êtes-vous de votre routeur ou de l'histoire prop de? Assurez-vous que vous obtenez à partir de votre composant parent ou de la page (j'.e de la console.journal(ce.les accessoires) sur le render de la fonction et vérifier que vous avez l'impression que le routeur prop afin d'être en mesure de l'utiliser. Me semble que vous n'avez pas de routeur dans votre composant.
    InformationsquelleAutor Rodius
  6. 0

    Chaque réponse ici a des parties de la solution totale. Voici la solution complète que j'ai utilisé pour le faire fonctionner à l'intérieur des composants plus profond que où la Route a été utilisée:

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

    ^ Vous avez besoin que la deuxième ligne de fonction d'importation et d'exportation de composants au bas de la page.

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

    ^ Requis la flèche en fonction de vs simplement onClick={présent.accessoires de jeu.l'histoire.goBack()}

    export default withRouter(MyPage)

    ^ envelopper votre composant du nom de 'withRouter()'

    InformationsquelleAutor foureyedraven
  7. -1

    Simplement utiliser

    <span onClick={() => this.props.history.goBack()}>Back</span>
    InformationsquelleAutor IamMHussain