Реактивный маршрутизатор (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 не является объектом (оценка "this.props")

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

Дает ошибку:

TypeError: null - это не объект (оценка "this.context")

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

Дает ошибку:

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

Публикация кода 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;

Ответы

Ответ 1

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

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
}

Ответ 3

this.props.history.goBack();

Это правильное решение для реактивного маршрутизатора v4

Но вы должны иметь в виду, что вам нужно убедиться, что this.props.history существует.

Это означает, что вам нужно вызвать эту функцию this.props.history.goBack(); внутри компонента, который завернут с помощью <Route/>

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

РЕДАКТИРОВАТЬ:

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

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

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

export default withRouter(Demo);

Ответ 4

Для использования с React Router v4 и функциональным компонентом в любом месте дерева доменов.

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

Пытаться:

this.props.router.goBack()

Ответ 6

Просто используйте

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

Ответ 7

У каждого ответа здесь есть части полного решения. Вот полное решение, которое я использовал, чтобы заставить его работать внутри компонентов глубже, чем там, где использовался Route:

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

^ Вам нужна эта вторая строка для импорта функции и экспорта компонента внизу страницы.

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

^ Требуется функция стрелки против просто onClick = {this.props.history.goBack()}

export default withRouter(MyPage)

^ оберните имя компонента с помощью withRouter()