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 не є об'єктом (оцінюючи 'this.props')

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

Видає помилку:

Помилка типу: null не є об'єктом (оцінюючи 'this.context')

3. 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;

Я думаю, що проблема полягає у прив’язку:

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
}

this.props.history.goBack();

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

Але потрібно пам’ятати одне, що вам потрібно переконатися, що this.props.history існує.

Це означає, що вам потрібно викликати цю функцію this.props.history.goBack();всередині компонента, який обгорнуто <Route />

Якщо ви викликаєте цю функцію в компоненті, який знаходиться глибше в дереві компонентів, вона не буде працювати.

РЕДАГУВАТИ:

Якщо ви хочете, щоб об'єкт історії був у компоненті, який знаходиться глибше в дереві компонентів (який не обгортається <Маршрутом>), ви можете зробити щось подібне:

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

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

export default withRouter(Demo);

Для використання з React Router v4 та функціональним компонентом у будь-якому місці 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);

Кожна відповідь тут має частини загального рішення. Ось повне рішення, за допомогою якого я працював усередині компонентів глибше, ніж там, де використовувався 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 ()'

Чи можете ви надати код, де ви використовуєте 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

Ось найчистіший і найпростіший спосіб вирішення цієї проблеми, який також зводить нанівець можливі підводні камені this keyword. Використовуйте функціональні компоненти:

import { withRouter } from "react-router-dom"; обернути componentабо краще App.jsз withRouter() HOCцими марками historyбути доступні «додаток-широким». упаковка вашого компонента лише робить history available for that specificкомпонент ` ` вашим вибором.

Отже, у вас є:

1. export default withRouter(App);

2. У середовищі Redux export default withRouter( connect(mapStateToProps, { <!-- your action creators -->})(App), );ви навіть можете мати можливість користуватися historyсвоїми творцями дій таким чином.

в вашому componentзробити наступне:

import {useHistory} from react-router-dom;

const history = useHistory(); // do this inside the component

goBack = () => history.goBack();

<btn btn-sm btn-primary onclick={goBack}>Go Back</btn>

export default DemoComponent;

Gottcha useHistoryекспортується лише з останньої версії 5.1, react-router-domтому не забудьте оновити пакет. Однак турбуватися не варто. про численні корчі this keyword.

Ви також можете зробити цей компонент багаторазовим для використання у вашому додатку.

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}```
Cheers.

Спробуйте:

this.props.router.goBack()

Просто використовуйте

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

Сподіваюся, це комусь допоможе:

import React from 'react';
import * as History from 'history';
import { withRouter } from 'react-router-dom';

interface Props {
  history: History;
}

@withRouter
export default class YourComponent extends React.PureComponent<Props> {

  private onBackClick = (event: React.MouseEvent): void => {
    const { history } = this.props;
    history.goBack();
  };

...

Можливо, це може комусь допомогти.

Я використовував history.replace()для переспрямування, тому, коли я намагався використовувати history.goBack(), я перейшов на попередню сторінку до сторінки, з якою працював. Тому я змінив метод history.replace()на те, history.push()щоб історію можна було зберегти, і я зміг би повернутися назад.

Я не впевнений, що хтось ще стикався з цією проблемою, або, можливо, доведеться це побачити. Але я витратив близько 3 годин, намагаючись вирішити цю проблему:

Я хотів застосувати простий goBack () натисканням кнопки. Я думав, що почав добре, оскільки мій App.js вже був загорнутий у маршрутизатор, і я імпортував {BrowserRouter as Router} з 'response-router-dom'; ... Оскільки елемент Router дозволяє мені оцінити об'єкт історії.

напр .:

import React from 'react';
import './App.css';
import Splash from './components/Splash';
import Header from './components/Header.js';
import Footer from './components/Footer';
import Info from './components/Info';
import Timer from './components/Timer';
import Options from './components/Options';
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
  return (
    <Router>
      <Header />
      <Route path='/' component={Splash} exact />
      <Route path='/home' component={Info} exact />
      <Route path='/timer' component={Timer} exact />
      <Route path='/options' component={Options} exact />
      <Footer />
    </Router>
  );
}
export default App;

АЛЕ проблема в моєму модулі Nav (дочірній компонент), мені довелося "імпортувати {withRouter} з" response-router-dom "; ' а потім примусити експорт за допомогою:

export default withRouter(Nav);

напр .:

import React from 'react';
import { withRouter } from 'react-router-dom';
class Nav extends React.Component {
    render() {
        return (
            <div>
                <label htmlFor='back'></label>
                <button id='back' onClick={ () => this.props.history.goBack() }>Back</button>
                <label htmlFor='logOut'></label>
                <button id='logOut' ><a href='./'>Log-Out</a>            
</button>
            </div>
        );
    }
}
export default withRouter(Nav);

підсумовуючи, withRouter було створено через відому проблему в React, коли в певних сценаріях, коли відмовляють у спадкуванні від маршрутизатора, необхідний примусовий експорт.