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);
});
javascript
reactjs
react-router
Bomber
quelle
quelle
Antworten:
Ich denke, Sie müssen nur BrowserHistory auf Ihrem Router aktivieren, indem Sie es so initialisieren :
<Router history={new BrowserHistory}>
.Zuvor sollten Sie verlangen
BrowserHistory
von'react-router/lib/BrowserHistory'
Ich hoffe das hilft !
UPDATE: Beispiel in ES6
quelle
this.props.history
. Also, der Code wirdthis.props.history.goBack
Update mit React v16 und ReactRouter v4.2.0 (Oktober 2017):
Update mit React v15 und ReactRouter v3.0.0 (August 2016):
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:
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
quelle
importieren
withRouter
Exportieren Sie Ihre Komponente als:
Beispiel
goBack
: Rufen Sie beim Klicken auf die Schaltfläche Folgendes auf :Getestet auf
react-router-dom
v4.3quelle
withRouter
. Vielleicht verwenden wir nur die native API für den Browserverlauf. Aber ist das in Ordnung?Kein Navigationsmixin erforderlich!
quelle
this.context.router.history.goBack
. (+ Geschichte)import { withRouter } from 'react-router-dom';
funktioniert mitthis.props.history.goBack();
ES6-Methode ohne Mixins mit React-Router, zustandslose Funktion.
quelle
export 'browserHistory' was not found in 'react-router'
React Hooks verwenden
Importieren:
In zustandsloser Komponente:
Auf Ereignis
quelle
Verwenden Sie
withRouter
undhistory.goBack()
Dies ist die Idee, die ich umsetze ...
History.js
PageOne.js
ps Entschuldigung, der Code ist zu groß, um alles hier zu posten
quelle
go
Funktion übergeben :history.go(+1)
?history.go(1)
sollte genug sein.Dies funktioniert mit dem Browser- und Hash-Verlauf.
quelle
Dies ist eine funktionierende BackButton-Komponente (React 0.14):
Sie können natürlich so etwas tun, wenn es keine Geschichte gibt:
quelle
Für den React-Router v2.x hat sich dies geändert. Folgendes mache ich für ES6:
quelle
In React-Router v4.x können Sie verwenden,
history.goBack
was äquivalent zu isthistory.go(-1)
.App.js.
Back.js
Demo: https://codesandbox.io/s/ywmvp95wpj
Bitte denken Sie daran, dass durch die Verwendung
history
Ihrer Benutzer verlassen werden kann, dahistory.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-dom
undreact-router-last-location
vonnpm
.Dann verwenden Sie
LastLocationProvider
wie folgt:App.js.
Back.js
Demo: https://codesandbox.io/s/727nqm99jj
quelle
lastLocation
außerhalb des React verwenden oderI'd like to use it programmatically
möchten Sie vielleicht sagen , möchten Sie nur die Möglichkeit haben, es wie zu importierenimport { lastLocation } from '...'
?Was für mich funktionierte, war das Importieren mit Router oben in meiner Datei;
Verwenden Sie es dann, um die exportierte Funktion am Ende meiner Datei zu verpacken.
Dadurch konnte ich auf die Verlaufs-Requisite des Routers zugreifen. Vollständiger Beispielcode unten!
quelle
Gehen Sie zurück zu einer bestimmten Seite :
Zurück zur vorherigen Seite:
quelle
Ich benutze diese Versionen
quelle
Die einzige Lösung, die für mich funktioniert hat, war die einfachste. Keine zusätzlichen Importe erforderlich.
Tks, IamMHussain
quelle
Nennen Sie die folgende Komponente wie folgt:
Und hier ist die Komponente:
Ich benutze:
quelle
Sie können auch verwenden,
react-router-redux
was hatgoBack()
undpush()
.Hier ist ein Sampler Pack dafür:
Im Einstiegspunkt Ihrer App benötigen Sie
ConnectedRouter
, und eine manchmal schwierige Verbindung zum Anschließen ist dashistory
Objekt. Die Redux-Middleware hört Änderungen im Verlauf ab: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:Der obige Beispielblock zeigt, wie die
react-router-redux
Middleware-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:
Ich benutze die
routerReducer
ganze Zeit, weil es mir erlaubt, das Neuladen von Komponenten zu erzwingen, die normalerweise nicht aufgrund vonshouldComponentUpdate
. Das offensichtliche Beispiel ist, wenn Sie eine Navigationsleiste haben, die aktualisiert werden soll, wenn ein Benutzer eineNavLink
Taste drückt . Wenn Sie diesen Weg gehen, werden Sie erfahren, dass die Verbindungsmethode von Redux verwendetshouldComponentUpdate
. MitrouterReducer
können SiemapStateToProps
Routing-Änderungen in der Navigationsleiste zuordnen. Dadurch wird die Aktualisierung ausgelöst, wenn sich das Verlaufsobjekt ändert.So was:
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,
shouldComponentUpdate
indem Sie die Verbindungsfunktion entfernen und prüfen, ob das Problem dadurch behoben wird. Wenn dies der Fall ist, ziehen Sie dierouterReducer
und die Komponente wird ordnungsgemäß aktualisiert, wenn sich die URL ändert.Abschließend können Sie nach all dem anrufen
goBack()
oderpush()
jederzeit!Versuchen Sie es jetzt in einer zufälligen Komponente:
connect()
mapStateToProps
odermapDispatchToProps
react-router-redux
this.props.dispatch(goBack())
this.props.dispatch(push('/sandwich'))
Wenn Sie weitere Stichproben benötigen, besuchen Sie: https://www.npmjs.com/package/react-router-redux
quelle
Einfach so verwenden
quelle
Dieser Code erledigt den Trick für Sie.
quelle
Reagiere auf Router v6
useNavigate
Hook ist der empfohlene Weg, um jetzt zurückzukehren:Codesandbox-Beispiel
Gehen Sie mehrere Verlaufsstapeleinträge vor / zurück: Gehen Sie zu einer bestimmten Route:useNavigate
ersetztuseHistory
, um den kommenden React Suspense / Concurrent-Modus besser zu unterstützen.quelle
Attempted import error: 'useNavigate' is not exported from 'react-router-dom'.
v6.0.0-beta.0
haben Entwickler dashistory
Paket zu einer Peer-Abhängigkeit gemacht. Schauen Sie sich die aktualisierte Codesandbox an, die jetzt wieder funktioniert.Laut https://reacttraining.com/react-router/web/api/history
Für
"react-router-dom": "^5.1.2",
,quelle