React-Router gehen eine Seite zurück Wie konfigurieren Sie den Verlauf?

Kann mir bitte jemand sagen, wie ich zur vorherigen Seite zurückkehren kann, anstatt zu einer bestimmten Route?

Bei Verwendung dieses Codes:

var BackButton = React.createClass({

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

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

Erhalten Sie diesen Fehler, goBack () ignoriert, da kein Routerverlauf vorhanden ist

Hier sind meine Routen:

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

Ich denke, Sie müssen nur BrowserHistory auf Ihrem Router aktivieren, indem Sie es so initialisieren : <Router history={new BrowserHistory}>.

Zuvor sollten Sie verlangen BrowserHistoryvon'react-router/lib/BrowserHistory'

Ich hoffe das hilft !

UPDATE: Beispiel in 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);

Update mit React v16 und ReactRouter v4.2.0 (Oktober 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>
    )
  }
}

Update mit React v15 und ReactRouter v3.0.0 (August 2016):

var browserHistory = ReactRouter.browserHistory;

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

Erstellt eine Geige mit einem etwas komplexeren Beispiel mit einem eingebetteten Iframe: https://jsfiddle.net/kwg1da3a/

React v14 und ReacRouter v1.0.0 (10. September 2015)

Du kannst das:

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

Sie müssen vorsichtig sein, dass Sie die notwendige Geschichte haben, um zurück zu gehen. Wenn Sie direkt auf die Seite und dann zurück klicken, werden Sie vor Ihrer App wieder in den Browserverlauf aufgenommen.

Diese Lösung berücksichtigt beide Szenarien. Es wird jedoch kein Iframe verarbeitet, der mit der Zurück-Schaltfläche innerhalb der Seite navigieren (und zum Browserverlauf hinzufügen) kann. Ehrlich gesagt denke ich, dass dies ein Fehler im React-Router ist. Hier erstelltes Problem: https://github.com/rackt/react-router/issues/1874

1. importieren withRouter

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

2. Exportieren Sie Ihre Komponente als:

   export withRouter(nameofcomponent) 

3. Beispiel goBack: Rufen Sie beim Klicken auf die Schaltfläche Folgendes auf :

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

Getestet auf react-router-domv4.3

this.context.router.goBack()

Kein Navigationsmixin erforderlich!

ES6-Methode ohne Mixins mit React-Router, zustandslose Funktion.

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

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

React Hooks verwenden

Importieren:

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

In zustandsloser Komponente:

  let history = useHistory();

Auf Ereignis

history.goBack()

Schauen Sie sich mein Arbeitsbeispiel mit React 16.0 mit React-Router v4 Live Example an . Überprüfen Sie den Code Github

Verwenden Sie withRouterundhistory.goBack()

Dies ist die Idee, die ich umsetze ...

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 Entschuldigung, der Code ist zu groß, um alles hier zu posten

Dies funktioniert mit dem Browser- und Hash-Verlauf.

this.props.history.goBack();

Dies ist eine funktionierende BackButton-Komponente (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;

Sie können natürlich so etwas tun, wenn es keine Geschichte gibt:

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

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

Für den React-Router v2.x hat sich dies geändert. Folgendes mache ich für 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
};

In React-Router v4.x können Sie verwenden, history.goBackwas äquivalent zu ist 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);

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

Bitte denken Sie daran, dass durch die Verwendung historyIhrer Benutzer verlassen werden kann, da history.goBack()eine Seite geladen werden kann, die der Besucher vor dem Öffnen Ihrer Anwendung besucht hat.

Um eine solche Situation wie oben beschrieben zu verhindern, habe ich einen einfachen Bibliotheksreaktionsrouter -letzten Speicherort erstellt , der den letzten Speicherort Ihrer Benutzer überwacht.

Die Verwendung ist sehr einfach. Zuerst müssen Sie installieren react-router-domund react-router-last-locationvon npm.

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

Dann verwenden Sie LastLocationProviderwie folgt:

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

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

Was für mich funktionierte, war das Importieren mit Router oben in meiner Datei;

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

Verwenden Sie es dann, um die exportierte Funktion am Ende meiner Datei zu verpacken.

export default withRouter(WebSitePageTitleComponent)

Dadurch konnte ich auf die Verlaufs-Requisite des Routers zugreifen. Vollständiger Beispielcode unten!

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)

Gehen Sie zurück zu einer bestimmten Seite :

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

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

Zurück zur vorherigen Seite:

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

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

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

this.props.history.goBack();

Ich benutze diese Versionen

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

Die einzige Lösung, die für mich funktioniert hat, war die einfachste. Keine zusätzlichen Importe erforderlich.

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

Tks, IamMHussain

Nennen Sie die folgende Komponente wie folgt:

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

Und hier ist die Komponente:

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

Ich benutze:

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

REDUXIEREN

Sie können auch verwenden, react-router-reduxwas hat goBack()und push().

Hier ist ein Sampler Pack dafür:

Im Einstiegspunkt Ihrer App benötigen Sie ConnectedRouter, und eine manchmal schwierige Verbindung zum Anschließen ist das historyObjekt. Die Redux-Middleware hört Änderungen im Verlauf ab:

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

Ich werde Ihnen einen Weg zeigen, das anzuschließen history. Beachten Sie, wie der Verlauf in den Store importiert und auch als Singleton exportiert wird, damit er im Einstiegspunkt der App verwendet werden kann:

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

Der obige Beispielblock zeigt, wie die react-router-reduxMiddleware-Helfer geladen werden, die den Setup-Vorgang abschließen.

Ich denke, dieser nächste Teil ist komplett extra, aber ich werde ihn aufnehmen, nur für den Fall, dass jemand in Zukunft Nutzen findet:

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

export default combineReducers({
  routing, form,
})

Ich benutze die routerReducerganze Zeit, weil es mir erlaubt, das Neuladen von Komponenten zu erzwingen, die normalerweise nicht aufgrund von shouldComponentUpdate. Das offensichtliche Beispiel ist, wenn Sie eine Navigationsleiste haben, die aktualisiert werden soll, wenn ein Benutzer eine NavLinkTaste drückt . Wenn Sie diesen Weg gehen, werden Sie erfahren, dass die Verbindungsmethode von Redux verwendet shouldComponentUpdate. Mit routerReducerkönnen Sie mapStateToPropsRouting-Änderungen in der Navigationsleiste zuordnen. Dadurch wird die Aktualisierung ausgelöst, wenn sich das Verlaufsobjekt ändert.

So was:

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

export default connect(mapStateToProps)(Nav)

Verzeihen Sie mir, während ich einige zusätzliche Schlüsselwörter für Personen hinzufüge: Wenn Ihre Komponente nicht ordnungsgemäß aktualisiert wird, überprüfen Sie dies, shouldComponentUpdateindem Sie die Verbindungsfunktion entfernen und prüfen, ob das Problem dadurch behoben wird. Wenn dies der Fall ist, ziehen Sie die routerReducerund die Komponente wird ordnungsgemäß aktualisiert, wenn sich die URL ändert.

Abschließend können Sie nach all dem anrufen goBack()oder push()jederzeit!

Versuchen Sie es jetzt in einer zufälligen Komponente:

1. Importieren in connect()
2. Du brauchst nicht einmal mapStateToPropsodermapDispatchToProps
3. In goBack importieren und von drücken react-router-redux
4. Anruf this.props.dispatch(goBack())
5. Anruf this.props.dispatch(push('/sandwich'))
6. Erleben Sie positive Emotionen

Wenn Sie weitere Stichproben benötigen, besuchen Sie: https://www.npmjs.com/package/react-router-redux

Einfach so verwenden

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

Dieser Code erledigt den Trick für Sie.

this.context.router.history.goBack()

Reagiere auf Router v6

useNavigate Hook ist der empfohlene Weg, um jetzt zurückzukehren:

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

Codesandbox-Beispiel

<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 ersetzt useHistory , um den kommenden React Suspense / Concurrent-Modus besser zu unterstützen.

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

Für "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,
};