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 landing page:
<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 las páginas siguientes, 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 tuve suerte: 1. this.props.history.goBack();
Da error:
TypeError: null no es un objeto (evaluando 'this.props')
this.context.router.goBack();Da error:
TypeError: null no es un objeto (evaluando 'this.context')
this.props.history.push('/');Da error:
TypeError: null no es un objeto (evaluando 'this.props')
Page1 el código de la página 1 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">< Back</Button> </div> <div className="navigationButtonsRight"> <Button onClick={this.handleNext} bsStyle="success">Next ></Button> </div> </div> ); } export default Page1;Creo que el problema es con el enlace:
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 supuse antes de que publicaras el código:
constructor(props) { super(props); this.handleNext = this.handleNext.bind(this); this.handleBack = this.handleBack.bind(this); // you are missing this line }ACTUALIZADO:
Ahora tenemos gancho, por lo que podemos hacerlo fácilmente usando useHistory
const history = useHistory() const goBack = () => { history.goBack() } return ( <button type="button" onClick={goBack}> Go back </button> );PUBLICACIÓN ORIGINAL:
this.props.history.goBack();Esta es la solución correcta para react-router v4
Pero una cosa que debe tener en cuenta es que debe asegurarse de que exista this.props.history.
Eso significa que debe 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 más profundo en el árbol de componentes, no funcionará.
EDITAR:
Si desea tener un objeto de historial en el componente que está más profundo en el árbol de componentes (que no está envuelto por <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);Para usar con React Router v4 y un componente funcional en cualquier parte del árbol 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);