Как я могу остановить историю go назад, если мы загружаем приложение React на новую страницу?

Question

Как я могу легко внедрить кнопки «назад» и «вперед» в приложении реакции? У меня есть набор страниц, которые пользователь может просматривать. Я просто хочу реализовать пару кнопок внизу, которые помогают пользователю перемещаться назад и вперед без использования кнопок браузера.

Я использую компонент истории:

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


class History extends Component {

  handleBack = () => {
    this.props.history.goBack()
  }

  handleForward = () => {
    this.props.history.go(1)
  }

  render() {
    return (
      <div className="navigation-container">
        <div className="navigation-row">
          <span onClick={this.handleBack} className="back">
            BACK
          </span>
          <span onClick={this.handleForward} className="next ">
            NEXT
          </span>
        </div>
      </div>
    )
  }
}

export default withRouter(History)

В моем Приложение. js У меня есть:

<Switch>
    <Route path="/" exact component={Home} />
    <Route path="/menu/:section" exact component={Section}/>
    <Route component={Error} />
</Switch>
<History />

Когда вы загружаете новую страницу, загружаете мое приложение localhost и затем нажимаете «Назад», оно переходит на пустую «новую страницу» в браузере. Есть ли способ остановить это?

Answer 1

На самом деле, для вашей проблемы есть много решений, и каждое решение связано со своими проблемами. Например, вы можете использовать Link компонент react-router-dom, а затем напрямую передать маршрут:

import { Link } from 'react-router-dom';

~~~

<Link to="/prev-route">
  Prev
</Link>

<Link to="/next-route">
  Next
</Link>

Или вы можете использовать push функцию history, переданную с помощью withRouter как показано ниже:

handleBack = () => {
  this.props.history.push('/prev-route');
};

handleForward = () => {
  this.props.history.push('/next-route');
};

Или в некоторых редких случаях есть встроенный API-интерфейс браузера, чтобы сделать что-то вроде этого:

handleBack = () => {
  this.props.history.back();
};

handleForward = () => {
  this.props.history.forward();
};

Определенно, в проекте ReactJS я использую react-router-dom решения.