111 votes

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

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

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

Donne une erreur :

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

  1. 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;

0 votes

Quelles sont les quelques choses que vous avez essayées ?

3 votes

Essayez this.props.history.goBack(); github.com/ReactTraining/react-router/blob/

0 votes

@VivekDoshi : J'ai ajouté ce que j'ai essayé avec les erreurs que j'ai rencontrées.

144voto

Vivek Doshi Points 18852

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
}

0 votes

Ne fonctionne pas lorsque le bouton retour du navigateur est pressé et dans componentDidUpdate et window.onpopstate ?

49voto

piavgh Points 62
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);

0 votes

Alors comment ça peut marcher ? Comment pouvez-vous remonter le temps de n'importe où ?

0 votes

@Felipe Vous pouvez revenir en arrière de n'importe où. Je veux simplement dire que vous devez ajouter cette ligne de code dans les composants Container afin d'obtenir l'objet "history", n'utilisez pas cette ligne de code dans les composants Presentational qui ne sont pas enveloppés par Route ( medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 )

0 votes

@Felipe : Bonjour, veuillez consulter ma réponse modifiée. Je pense qu'elle répond à votre question.

18voto

frippera Points 51

À 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);

0 votes

C'est une bonne solution car elle n'utilise pas de méthode de cycle de vie. Elle est également plus claire pour moi car elle indique ce qui est transmis, dans ce cas l'objet historique.

0 votes

La version flèche de graisse me semble toujours beaucoup plus propre, merci pour cela.

11voto

foureyedraven Points 34

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()".

5voto

Alfredo Re Points 87

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

0 votes

Cela me donne une erreur, veuillez voir la question mise à jour ci-dessus.

0 votes

Pouvez-vous également ajouter le code autour de this.props.history.push('/Page2'); ? Si this.props n'est pas nulle à cet endroit, cela devrait fonctionner.

1 votes

Rien en fait, je l'appelle juste en cas de clic sur le bouton Retour dans mon composant.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X