javascript - page - react-router(v4) ¿Cómo volver?

react meta tags

Question

Tratando de averiguar cómo puedo volver a la página anterior. Estoy usando [react-router-v4][1]

Este es el código que he configurado en mi primera página de destino:

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

Para reenviar a páginas subsiguientes, simplemente hago:

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

Sin embargo, ¿cómo puedo volver a la página anterior? Intenté algunas cosas como las que se mencionan a continuación, pero no hubo suerte: 1. this.props.history.goBack();

Da error:

TypeError: null no es un objeto (evaluando ''this.props'')

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

Da error:

TypeError: null no es un objeto (evaluando ''this.context'')

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

Da error:

TypeError: null no es un objeto (evaluando ''this.props'')

Publicando el código de Page1 aquí abajo:

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

¿Puede proporcionar el código donde usa this.props.history.push(''/Page2''); ?

¿Has probado el método goBack ()?

this.props.history.goBack();

Se encuentra aquí https://reacttraining.com/react-router/web/api/history

Con un ejemplo en vivo aquí https://reacttraining.com/react-router/web/example/modal-gallery

Answer 2

Cada respuesta aquí tiene partes de la solución total. Aquí está la solución completa que utilicé para que funcionara dentro de componentes más profundos que donde se usó Route:

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

^ Necesitas esa segunda línea para importar la función y exportar el componente al final de la página.

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

^ Se requiere la función de flecha vs simplemente onClick = {this.props.history.goBack ()}

export default withRouter(MyPage)

^ envuelva el nombre de su componente con ''withRouter ()''

Answer 3

Creo que el problema es vinculante:

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>

Como he asumido antes de publicar el código:

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

Answer 4

Para usar con React Router v4 y un componente funcional en cualquier lugar del 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 5

Simplemente use

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

Answer 6

Tratar:

this.props.router.goBack()

Answer 7

this.props.history.goBack();

Esta es la solución correcta para reaccion-router v4

Pero una cosa que debes tener en cuenta es que debes asegurarte de que existe esta .historia.props.historia.

Eso significa que necesita llamar a esta función this.props.history.goBack(); dentro del componente que está envuelto por <Route />

Si llama a esta función en un componente que está más profundo en el árbol de componentes, no funcionará.

EDITAR:

Si desea tener un objeto histórico en el componente que está más profundo en el árbol de componentes (que no está incluido en <Ruta>), puede hacer algo como esto:

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

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

export default withRouter(Demo);