react-router (v4) как вернуться?

пытаясь выяснить, как я могу вернуться на предыдущую страницу. Я использую [react-router-v4][1]

это код, который я настроил на своей первой целевой странице:

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

чтобы переслать на последующие страницы, я просто делаю:

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

однако, как я могу вернуться к предыдущей странице? Пробовал несколько вещей, как указано ниже, но не повезло: 1. this.props.history.goBack();

выдает ошибку:

TypeError: null не является объектом (оценка 'этот.реквизит')

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

выдает ошибку:

TypeError: null не является объектом (оценка ' this.context')

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

выдает ошибку:

TypeError: null не является объектом (оценка ' this.реквизит')

публикации Page1 код ниже:

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;
10
javascript react-router-v4 reactjs

5 ответов

Я думаю, что проблема с привязкой:

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>

Как я предполагал, прежде чем вы разместили код:

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

можете ли вы предоставить код, где вы используете this.props.history.push('/Page2');?

вы пробовали метод goBack ()?

this.props.history.goBack();

он указан здесь https://reacttraining.com/react-router/web/api/history

С живым примером здесь https://reacttraining.com/react-router/web/example/modal-gallery

2
this.props.history.goBack();

это правильное решение для react-router v4

но одна вещь, которую вы должны иметь в виду, это то, что вам нужно убедиться в этом.реквизит.история существует.

это означает, что вам нужно вызвать эту функцию this.props.history.goBack(); внутри компонента, который обернут

Если вы вызываете эту функцию в компоненте, который глубже в дереве компонентов, она не будет работать.

EDIT:

Если вы хотите иметь объект истории в компоненте, который находится глубже в дереве компонентов (который не обернут ), вы можете сделать что-то вроде этого:

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

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

export default withRouter(Demo);
1

попробуй: 

this.props.router.goBack()
0

просто использовать

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