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