react-router revenir en arrière comment configurer l'historique?

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

Lors de l'utilisation de 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 du 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);
 });

Je pense que vous avez juste besoin d'activer BrowserHistory sur votre routeur par comme ça initialisation de : <Router history={new BrowserHistory}>.

Avant cela, vous devriez exiger BrowserHistoryde'react-router/lib/BrowserHistory'

J'espère que cela 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);

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éé un violon avec un exemple un peu plus complexe avec une iframe intégrée: 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 accédez directement à la page, puis que vous revenez, 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 une iframe qui peut naviguer dans la page (et ajouter à l'historique du navigateur), avec le bouton retour. Franchement, je pense que c'est un bogue dans le react-router. Problème créé ici: https://github.com/rackt/react-router/issues/1874

1. importer withRouter

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

2. Exportez votre composant sous:

   export withRouter(nameofcomponent) 

3. Exemple, en cliquant sur un bouton, appelez goBack:

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

Testé sur la react-router-domv4.3

this.context.router.goBack()

Aucun mixin de navigation requis!

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>
)

Utilisation des hooks React

Importer:

import { useHistory } from "react-router-dom";

Dans le composant sans état:

  let history = useHistory();

Sur événement

history.goBack()

Consultez mon exemple de travail utilisant React 16.0 avec React-router v4 Live Example . consultez le code Github

Utiliser withRouterethistory.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

ps désolé le code est trop gros pour tout poster ici

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

this.props.history.goBack();

Ceci est un composant BackButton fonctionnel (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 ça s'il n'y a pas d'historique:

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

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

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
};

Revenir à une page spécifique :

  import { useHistory } from "react-router-dom";

  const history = useHistory();
  
  const routeChange = () => {
    let path = '/login';
    history.push(path);
  };

Revenir à la page précédente :

  import { useHistory } from "react-router-dom";

  const history = useHistory();
  
  const routeChange = () => {
    history.goBack()
  };

Dans react-router v4.x, vous pouvez utiliser history.goBackce 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 historyvos utilisateurs peuvent partir car ils history.goBack()peuvent charger une page que le visiteur a visitée avant d'ouvrir votre application.

Pour éviter une telle situation comme décrit 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-domet à react-router-last-locationpartir de npm.

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

Ensuite, utilisez LastLocationProvidercomme 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

Ce qui a fonctionné pour moi était 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(WebSitePageTitleComponent)

Ce qui m'a ensuite permis d'accéder à l'accessoire historique 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)

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",

La seule solution qui fonctionnait pour moi était la plus simple. Aucune importation supplémentaire nécessaire.

<a href="#" onClick={() => this.props.history.goBack()}>Back</a>

Tks, IamMHussain

Appelez le composant suivant comme ceci:

<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"

REDUX

Vous pouvez également utiliser react-router-reduxqui a goBack()etpush() .

Voici un pack d'échantillonneur pour cela:

Dans le point d'entrée de votre application, vous avez besoin ConnectedRouter, et une connexion parfois délicate à connecter est l' historyobjet. 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 le history. Notez comment 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

Le bloc d'exemple ci-dessus montre comment charger les react-router-reduxassistants middleware qui terminent le processus de configuration.

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

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

export default combineReducers({
  routing, form,
})

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

Comme ça:

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

export default connect(mapStateToProps)(Nav)

Pardonnez-moi pendant que j'ajoute des mots-clés supplémentaires pour les personnes: si votre composant ne se met pas à jour correctement, examinez shouldComponentUpdateen supprimant la fonction de connexion et voyez si elle résout le problème. Si tel est le cas, tirez sur routerReduceret le composant se mettra à jour correctement lorsque l'URL change.

En terminant, après avoir fait tout cela, vous pouvez appeler goBack()oupush() tout moment!

Essayez-le maintenant dans un composant aléatoire:

1. Importer dans connect()
2. Vous n'avez même pas besoin mapStateToPropsoumapDispatchToProps
3. Importer dans goBack et pousser depuis react-router-redux
4. Appel this.props.dispatch(goBack())
5. Appel this.props.dispatch(push('/sandwich'))
6. Vivez une émotion positive

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

Utilisez simplement comme ça

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

React Router v6

useNavigate Hook est la méthode recommandée pour revenir maintenant:

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

function App() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-1)}>go back</button>
      <button onClick={() => navigate(1)}>go forward</button>
    </>
  );
}

Échantillon de codesandbox

<button onClick={() => navigate(-2)}>go two back</button>
<button onClick={() => navigate(2)}>go two forward</button>

navigate("users") // go to users route, like history.push
navigate("users", { replace: true }) // go to users route, like history.replace
navigate("users", { state }) // go to users route, pass some state in

useNavigate remplace useHistory pour mieux prendre en charge le prochain mode React Suspense / Concurrent.

Ce morceau de code fera l'affaire pour vous.

this.context.router.history.goBack()

Selon https://reacttraining.com/react-router/web/api/history

Pour "react-router-dom": "^5.1.2",,

const { history } = this.props;
<Button onClick={history.goBack}>
  Back
</Button>

YourComponent.propTypes = {
  history: PropTypes.shape({
    goBack: PropTypes.func.isRequired,
  }).isRequired,
};