реагировать-маршрутизатор вернуться на страницу как настроить историю?

обновление с React v16 и ReactRouter v4.2. 0 (октябрь 2017):

class BackButton extends Component {
  static contextTypes = {
    router: () => true, // replace with PropTypes.object if you use them
  }

  render() {
    return (
      <button
        className="button icon-left"
        onClick={this.context.router.history.goBack}>
          Back
      </button>
    )
  }
}

обновление с React v15 и ReactRouter v3.0. 0 (август 2016):

var browserHistory = ReactRouter.browserHistory;

var BackButton = React.createClass({
  render: function() {
    return (
      <button
        className="button icon-left"
        onClick={browserHistory.goBack}>
        Back
      </button>
    );
  }
});

создал скрипку с немного более сложным примером со встроенным iframe:https://jsfiddle.net/kwg1da3a/

React v14 и ReacRouter v1.0. 0 (Sep 10, 2015)

вы можете сделать это:

var React = require("react");
var Router = require("react-router");

var SomePage = React.createClass({
  ...

  contextTypes: {
    router: React.PropTypes.func
  },
  ...

  handleClose: function () {
    if (Router.History.length > 1) {
      // this will take you back if there is history
      Router.History.back();
    } else {
      // this will take you to the parent route if there is no history,
      // but unfortunately also add it as a new route
      var currentRoutes = this.context.router.getCurrentRoutes();
      var routeName = currentRoutes[currentRoutes.length - 2].name;
      this.context.router.transitionTo(routeName);
    }
  },
  ...

вы должны быть осторожны, что у вас есть необходимые истории возвращаться. Если вы нажмете на страницу напрямую, а затем вернетесь, она вернет вас в историю браузера до вашего приложения.

это решение будет заботиться о обоих случаях. Однако он не будет обрабатывать iframe, который может перемещаться по странице (и добавлять в историю браузера) с помощью кнопки "Назад". Честно говоря, я думаю, что это ошибка в react-router. Выпуск создан здесь:https://github.com/rackt/react-router/issues/1874

this.context.router.goBack()

не требуется навигация mixin!

способ ЕС6 без примесей, используя реагировать-маршрутизатор, функцией без гражданства.

import React from 'react'
import { browserHistory } from 'react-router'

export const Test = () => (
  <div className="">
    <button onClick={browserHistory.goBack}>Back</button>
  </div>
)

1. импорт withRouter

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

2. экспортируйте ваш компонент как:

   export withRouter(nameofcomponent) 
   

3. пример, при нажатии кнопки, вызов goBack:

   <button onClick={this.props.history.goBack}>Back</button>
   

проверено на react-router-dom В4.3

это рабочий компонент BackButton (React 0.14):

var React = require('react');
var Router = require('react-router');

var History = Router.History;

var BackButton = React.createClass({
  mixins: [ History ],
  render: function() {
    return (
      <button className="back" onClick={this.history.goBack}>{this.props.children}</button>
    );
  }
});

module.exports = BackButton;

вы можете, конечно, сделать что-то вроде этого, если нет истории:

<button className="back" onClick={goBack}>{this.props.children}</button>

function goBack(e) {
  if (/* no history */) {
    e.preventDefault();
  } else {
    this.history.goBack();
  }
}

для react-router v2.х это изменилось. Вот что я делаю для ES6:

import React from 'react';
import FontAwesome from 'react-fontawesome';
import { Router, RouterContext, Link, browserHistory } from 'react-router';

export default class Header extends React.Component {

  render() {
    return (
      <div id="header">
        <div className="header-left">
          {
            this.props.hasBackButton &&
            <FontAwesome name="angle-left" className="back-button" onClick={this.context.router.goBack} />
          }
        </div>
        <div>{this.props.title}</div>
      </div>
    )
  }
}

Header.contextTypes = {
  router: React.PropTypes.object
};

Header.defaultProps = {
  hasBackButton: true
};

Header.propTypes = {
  title: React.PropTypes.string
};

этого.реквизит.история.goBack ();

Это работает с браузером и хэш-история.

зацените мой рабочий пример с использованием реагируют 16,0 С реагировать-маршрутизатор В4 Пример Github

использовать withRouter и history.goBack()

это идея, которую я реализую...

история.js

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import './App.css'


class History extends Component {

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

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

  render() {
    return <div className="container">
      <div className="row d-flex justify-content-between">
        <span onClick={this.handleBack} className="d-flex justify-content-start button">
          <i className="fas fa-arrow-alt-circle-left fa-5x"></i>
        </span>
        <span onClick={this.handleForward} className="d-flex justify-content-end button">
          <i className="fas fa-arrow-alt-circle-right fa-5x"></i>
        </span>
      </div>
    </div>
  }
}

export default withRouter(History)

PageOne.js

import React, { Fragment, Component } from 'react'

class PageOne extends Component {

   componentDidMount(){
      if(this.props.location.state && this.props.location.state.from != '/pageone')
      this.props.history.push({
         pathname: '/pageone',
         state: { 
             from: this.props.location.pathname
         }
       });
   }

   render() {
      return (
         <Fragment>
            <div className="container-fluid">
               <div className="row d-flex justify-content-center">
                  <h2>Page One</h2>
               </div>
            </div>
         </Fragment>
      )
   }
}

export default PageOne

p.s. извините код большой, чтобы разместить все это здесь

в react-router v4.X вы можете использовать history.goBack что эквивалентно history.go(-1).

приложение.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Back from "./Back";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "left"
};

const App = () => (
  <div style={styles}>
    <Router>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />

        <Back />{/* <----- This is component that will render Back button */}
      </div>
    </Router>
  </div>
);

render(<App />, document.getElementById("root"));

обратно.js

import React from "react";
import { withRouter } from "react-router-dom";

const Back = ({ history }) => (
  <button onClick={history.goBack}>Back to previous page</button>
);

export default withRouter(Back);

Demo: https://codesandbox.io/s/ywmvp95wpj

пожалуйста, помните, что с помощью history ваши пользователи могут уйти, потому что history.goBack() можно загрузить страницу, которую посетитель посетил перед открытием приложения.

---

To предотвратите такую ситуацию, как описано выше, я создал простую библиотеку react-router-last-location что смотреть ваши пользователи последнее место.

использование очень прямо вперед. Сначала вам нужно установить react-router-dom и react-router-last-location С npm.

npm install react-router-dom react-router-last-location --save

затем использовать LastLocationProvider как показано ниже:

приложение.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { LastLocationProvider } from "react-router-last-location";
//              ↑
//              |
//              |
//
//       Import provider
//
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Back from "./Back";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "left"
};

const App = () => (
  <div style={styles}>
    <h5>Click on About to see your last location</h5>
    <Router>
      <LastLocationProvider>{/* <---- Put provider inside <Router> */}
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>

          <hr />

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />

          <Back />
        </div>
      </LastLocationProvider>
    </Router>
  </div>
);

render(<App />, document.getElementById("root"));

обратно.js

import React from "react";
import { Link } from "react-router-dom";
import { withLastLocation } from "react-router-last-location";
//              ↑
//              |
//              |
//
//    `withLastLocation` higher order component
//    will pass `lastLocation` to your component               
//
//                   |
//                   |
//                   ↓
const Back = ({ lastLocation }) => (
  lastLocation && <Link to={lastLocation || '/'}>Back to previous page</Link>
);


//          Remember to wrap
//   your component before exporting
//
//                   |
//                   |
//                   ↓
export default withLastLocation(Back);

Demo: https://codesandbox.io/s/727nqm99jj

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

this.props.history.goBack();

Я использую эти версии

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",

вызовите следующий компонент следующим образом:

<BackButton history={this.props.history} />

и вот компонент:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
class BackButton extends Component {
  constructor() {
    super(...arguments)

    this.goBack = this.goBack.bind(this)
  }

  render() {
    return (
      <button
        onClick={this.goBack}>
          Back
      </button>
    )
  }

  goBack() {
    this.props.history.goBack()
  }
}

BackButton.propTypes = {
  history: PropTypes.object,
}

export default BackButton

Я использую:

"react": "15.6.1"
"react-router": "4.2.0"

возвращение

вы также можете использовать react-router-redux имеющего goBack() и push().

вот пакет сэмплера для этого:

в точке входа вашего приложения, вам нужно ConnectedRouter, и иногда сложное соединение для подключения-это . Если вы пойдете по этому пути, вы узнаете, что метод подключения Redux использует shouldComponentUpdate. С routerReducer, вы можете использовать mapStateToProps чтобы отобразить изменения маршрутизации в навигационной панели, и это вызовет его для обновления при изменении объекта истории.

такой:

const mapStateToProps = ({ routing }) => ({ routing })

export default connect(mapStateToProps)(Nav)

Простите меня, пока я добавляю некоторые дополнительные ключевые слова для людей: если ваш компонент не обновляется должным образом, расследовать shouldComponentUpdate путем удаления функции подключения и посмотреть, если он устраняет проблему. Если это так, потяните в routerReducer и компонент будет автоматически обновляться при изменении URL-адреса.

в заключение, сделав все это, вы можете позвонить goBack() или push() в любое время вы хотите!

попробуйте сейчас в каком-нибудь случайном компоненте:

1. импорт в connect()
2. вам даже не нужно mapStateToProps или mapDispatchToProps
3. импорт в goBack и push от react-router-redux
4. вызов this.props.dispatch(goBack())
5. вызов this.props.dispatch(push('/sandwich'))
6. испытывать положительные эмоции

Если вам нужно больше выборки, проверьте:https://www.npmjs.com/package/react-router-redux

просто используйте вот так

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

этот кусок кода будет делать трюк для вас.

this.context.router.history.goBack()