web-dev-qa-db-fra.com

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

Essayer de comprendre comment puis-je revenir à la page précédente. J'utilise [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 fais simplement:

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

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

Donne une erreur:

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

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

Donne une erreur:

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

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

Donne une erreur:

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

Publier le 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;
javascriptreactjsreact-router-v4
37
Akshay Lokur

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>

Comme je l'ai supposé avant de poster le code:

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

C'est la bonne solution pour react-router v4

Mais une chose à garder à l’esprit est que vous devez vous assurer que cet.props.histoire existe.

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

Si vous appelez cette fonction dans un composant plus en profondeur dans l'arborescence des composants, cela ne fonctionnera pas.

EDIT:

Si vous voulez avoir un objet historique dans le composant qui est plus profond dans l'arborescence des composants (qui n'est pas entouré 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);
11
Hoang Trinh

À utiliser avec React Router v4 et un composant fonctionnel n’importe où dans l’arborescence.

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);
5
frippera

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

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

this.props.history.goBack();

C'est listé ici https://reacttraining.com/react-router/web/api/history

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

4
Alfredo Re

Chaque réponse ici a des parties de la solution totale. Voici la solution complète que j'avais l'habitude de faire fonctionner à l'intérieur de composants plus profonds que ceux utilisés pour Route:

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

^ Vous avez besoin de cette deuxième ligne pour importer une fonction et exporter un composant en bas de page.

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

^ Requis la fonction de flèche vs simplement onClick = {this.props.history.goBack ()}

export default withRouter(MyPage)

^ Enveloppez le nom de votre composant avec 'withRouter ()'

1
foureyedraven

Essayer:

this.props.router.goBack()
0
Rodius