réagir-routeur revenir à la page précédente comment configurer l'historique?

Question

Quelqu'un peut-il me dire comment je peux retourner à la page précédente plutôt qu’à un itinéraire spécifique?

Lorsque vous utilisez ce code:

var BackButton = React.createClass({

 mixins: [Router.Navigation],
  render: function() {
    return (
        <button
            className="button icon-left"
            onClick={this.navigateBack}>
            Back
        </button>
    );
  },

  navigateBack: function(){
    this.goBack();
  }
});

Obtenez cette erreur, goBack () a été ignoré car il n'y a pas d'historique de routeur

Voici mes itinéraires:

// Routing Components
Route = Router.Route;
RouteHandler = Router.RouteHandler;
DefaultRoute = Router.DefaultRoute;

var routes = (
 <Route name="app" path="/" handler={OurSchoolsApp}>
     <DefaultRoute name="home" handler={HomePage} />
     <Route name="add-school" handler={AddSchoolPage}  />
     <Route name="calendar" handler={CalendarPage}  />
     <Route name="calendar-detail" path="calendar-detail/:id" handler={CalendarDetailPage} />
     <Route name="info-detail" path="info-detail/:id" handler={InfoDetailPage} />
     <Route name="info" handler={InfoPage} />
     <Route name="news" handler={NewsListPage} />
     <Route name="news-detail" path="news-detail/:id" handler={NewsDetailPage} />
     <Route name="contacts" handler={ContactPage} />
     <Route name="contact-detail" handler={ContactDetailPage} />
     <Route name="settings" handler={SettingsPage} />
 </Route>
 );

 Router.run(routes, function(Handler){
   var mountNode = document.getElementById('app');
   React.render(<Handler /> , mountNode);
 });

Answer 1

Je pense que vous devez simplement activer BrowserHistory sur votre routeur en l’initialisant ainsi: <Router history={new BrowserHistory}>.

Avant cela, vous devriez avoir besoin de BrowserHistory à partir de 'react-router/lib/BrowserHistory'

J'espère que ça aide!

UPDATE: exemple dans ES6

const BrowserHistory = require('react-router/lib/BrowserHistory').default;

const App = React.createClass({
    render: () => {
        return (
            <div><button onClick={BrowserHistory.goBack}>Go Back</button></div>
        );
    }
});

React.render((
    <Router history={BrowserHistory}>
        <Route path="/" component={App} />
    </Router>
), document.body);

Answer 2

Mise à jour avec React v16 et ReactRouter v4.2.0 (octobre 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>
    )
  }
}

Mise à jour avec React v15 et ReactRouter v3.0.0 (août 2016):

var browserHistory = ReactRouter.browserHistory;

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

Création d'un violon avec un exemple un peu plus complexe avec un iframe intégré: https://jsfiddle.net/kwg1da3a/

React v14 et ReacRouter v1.0.0 (10 septembre 2015)

Tu peux le faire:

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);
    }
  },
  ...

Vous devez faire attention à ce que vous ayez l'historique nécessaire pour revenir en arrière. Si vous cliquez directement sur la page, puis que vous répondez, cela vous ramènera dans l'historique du navigateur avant votre application.

Cette solution prendra en charge les deux scénarios. Cependant, il ne gérera pas un iframe pouvant naviguer dans la page (et l'ajouter à l'historique du navigateur), avec le bouton Précédent. Franchement, je pense que c'est un bug dans le routeur de réaction. Numéro créé ici: https://github.com/rackt/react-router/issues/1874

Answer 3

this.context.router.goBack()

Aucun mix de navigation requis!

Answer 4

Méthode ES6 sans mixins utilisant react-router, fonction sans état.

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

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

Answer 5

1. importer withRouter

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

2. Exportez votre composant en tant que:

   export withRouter(nameofcomponent) 
   

3. Par exemple, lors d’un clic sur un bouton, appelez goBack:

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

Testé sur react-router-dom v4.3

Answer 6

Pour react-router v2.x, cela a changé. Voici ce que je fais pour 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
};

Answer 7

Il s'agit d'un composant BackButton actif (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;

Vous pouvez bien sûr faire quelque chose comme ceci s'il n'y a pas d'histoire:

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

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

Answer 8

Découvrez mon exemple de travail avec React 16.0 avec React-router v4 Exemple en direct . vérifier le code Github 

Utilisez withRouter et history.goBack()

C'est l'idée que je mets en œuvre ...

History.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. désolé le code est trop gros pour tout poster ici

Answer 9

this.props.history.goBack ();

Cela fonctionne avec l'historique du navigateur et du hachage.

Answer 10

Dans react-router v4.x, vous pouvez utiliser history.goBack, ce qui équivaut à history.go(-1).

App.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"));

Back.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);

Démo:https://codesandbox.io/s/ywmvp95wpj

N'oubliez pas qu'en utilisant history, vos utilisateurs peuvent quitter car history.goBack() peut charger une page visitée par un visiteur avant d'ouvrir votre application.

---

Pour éviter une situation telle que décrite ci-dessus, j'ai créé une bibliothèque simple react-router-last-location qui surveille le dernier emplacement de vos utilisateurs.

L'utilisation est très simple . Vous devez d'abord installer react-router-dom et react-router-last-location à partir de npm.

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

Ensuite, utilisez LastLocationProvider comme ci-dessous:

App.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"));

Back.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);

Démo:https://codesandbox.io/s/727nqm99jj

Answer 11

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

this.props.history.goBack();

J'utilise ces versions 

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

Answer 12

Ce qui a fonctionné pour moi a été d’importer avec Routeur en haut de mon fichier;

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

Ensuite, utilisez-le pour envelopper la fonction exportée au bas de mon fichier;

export default withRouter(SymptomsViewerPageTitleComponent)

Ce qui m'a ensuite permis d'accéder à l'hélice d'histoire du routeur. Exemple de code complet ci-dessous!

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

import PropTypes from 'prop-types'

class TestComponent extends Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    event.preventDefault()
    this.props.history.goBack()
  }

  render() {
    return (
      <div className="page-title">
        <a className="container" href="/location" onClick={this.handleClick}>
          <h1 className="page-header">
            { this.props.title }
          </h1>
        </a>
      </div>
    )
  }
}

const { string, object } = PropTypes

TestComponent.propTypes = {
  title: string.isRequired,
  history: object
}

export default withRouter(TestComponent)

Answer 13

Appelez le composant suivant comme suit:

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

Et voici le composant:

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

J'utilise:

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

Answer 14

REDUX

Vous pouvez également utiliser react-router-redux qui a goBack() et Push().

Voici un pack d'échantillons pour cela:

Dans le point d'entrée de votre application, vous avez besoin de ConnectedRouter, et une connexion parfois délicate à connecter est l'objet history. Le middleware Redux écoute les changements d’historique:

import React from 'react'
import { render } from 'react-dom'
import { ApolloProvider } from 'react-apollo'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import client from './components/apolloClient'
import store, { history } from './store'
import Routes from './Routes'
import './index.css'

render(
  <ApolloProvider client={client}>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Routes />
      </ConnectedRouter>
    </Provider>
  </ApolloProvider>,
  document.getElementById('root'),
)

Je vais vous montrer un moyen de brancher la history. Notez que l'historique est importé dans le magasin et également exporté en tant que singleton afin qu'il puisse être utilisé dans le point d'entrée de l'application:

import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'

export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [thunk, routerMiddleware(history)]

if (process.env.NODE_ENV === 'development') {
  const { devToolsExtension } = window
  if (typeof devToolsExtension === 'function') {
    enhancers.Push(devToolsExtension())
  }
}

const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers)
const store = createStore(rootReducer, initialState, composedEnhancers)

export default store

L'exemple de bloc ci-dessus montre comment charger les aides de middleware react-router-redux qui terminent le processus d'installation.

Je pense que cette partie suivante est complètement extra, mais je l'inclurai au cas où quelqu'un trouverait un avantage dans le futur:

import { combineReducers } from 'redux'
import { routerReducer as routing } from 'react-router-redux'

export default combineReducers({
  routing, form,
})

J'utilise routerReducer tout le temps car cela me permet de forcer le rechargement de composants qui normalement ne sont pas dus à shouldComponentUpdate. L'exemple évident est lorsque vous avez une barre de navigation qui est supposée se mettre à jour lorsqu'un utilisateur appuie sur un bouton NavLink. Si vous vous engagez dans cette voie, vous apprendrez que la méthode de connexion de Redux utilise shouldComponentUpdate. Avec routerReducer, vous pouvez utiliser mapStateToProps pour mapper les modifications de routage dans la barre de navigation, ce qui déclenchera sa mise à jour lorsque l'objet d'historique sera modifié.

Comme ça:

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

export default connect(mapStateToProps)(Nav)

Pardonnez-moi pendant que j'ajoute des mots-clés supplémentaires aux personnes: si votre composant ne se met pas à jour correctement, recherchez shouldComponentUpdate en supprimant la fonction de connexion et voyez si elle résout le problème. Si tel est le cas, entrez routerReducer et le composant sera mis à jour correctement lorsque l'URL sera modifiée.

En terminant, après tout cela, vous pouvez appeler goBack() ou Push() à tout moment!

Essayez-le maintenant dans un composant aléatoire:

1. Importer dans connect()
2. Vous n'avez même pas besoin de mapStateToProps ou mapDispatchToProps
3. Importer dans goBack et Push à partir de react-router-redux
4. Appelez this.props.dispatch(goBack())
5. Appelez this.props.dispatch(Push('/sandwich'))
6. Expérimentez une émotion positive

Si vous avez besoin de plus d'échantillons, consultez: https://www.npmjs.com/package/react-router-redux

Answer 15

Ce morceau de code fera l'affaire pour vous. 

this.context.router.history.goBack()

Answer 16

Il suffit d'utiliser comme ça

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