React-Router 5.1.0+ Antwort (mit Hooks und React> 16.8)
Sie können den neuen useHistoryHook für Funktionskomponenten verwenden und programmgesteuert navigieren:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
React-Router 4.0.0+ Antwort
Verwenden Sie in 4.0 und höher den Verlauf als Requisite Ihrer Komponente.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
HINWEIS: this.props.history ist nicht vorhanden, falls Ihre Komponente nicht von gerendert wurde <Route>. Sie sollten <Route path="..." component={YourComponent}/>this.props.history in YourComponent verwenden
React-Router 3.0.0+ Antwort
Verwenden Sie in Version 3.0 und höher den Router als Requisite Ihrer Komponente.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+ Antwort
Verwenden Sie in Version 2.4 und höher eine Komponente höherer Ordnung, um den Router als Requisite Ihrer Komponente zu erhalten.
import { withRouter } from 'react-router';
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
// Export the decorated class
var DecoratedExample = withRouter(Example);
// PropTypes
Example.propTypes = {
router: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
}).isRequired
};
React-Router 2.0.0+ Antwort
Diese Version ist abwärtskompatibel mit 1.x, sodass kein Upgrade-Handbuch erforderlich ist. Nur die Beispiele durchzugehen, sollte gut genug sein.
Wenn Sie jedoch zum neuen Muster wechseln möchten, befindet sich im Router ein browserHistory-Modul, auf das Sie zugreifen können
import { browserHistory } from 'react-router'
Jetzt haben Sie Zugriff auf Ihren Browserverlauf, sodass Sie beispielsweise Push, Ersetzen usw. ausführen können.
browserHistory.push('/some/path')
Weiterführende Literatur:
Geschichten und
Navigation
React-Router 1.xx Antwort
Ich werde nicht auf die Aktualisierung von Details eingehen. Sie können dies im Upgrade-Handbuch nachlesen
Die wichtigste Änderung bei dieser Frage ist der Wechsel vom Navigationsmixin zum Verlauf. Jetzt wird die Browser-Verlaufs-API verwendet, um die Route zu ändern, sodass wir sie pushState()von nun an verwenden werden.
Hier ist ein Beispiel mit Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Beachten Sie, dass dies Historyaus einem Rackt / History- Projekt stammt. Nicht vom React-Router selbst.
Wenn Sie Mixin aus irgendeinem Grund nicht verwenden möchten (möglicherweise aufgrund der ES6-Klasse), können Sie auf den Verlauf zugreifen, den Sie vom Router erhalten this.props.history. Es ist nur für die von Ihrem Router gerenderten Komponenten zugänglich. Wenn Sie es also in untergeordneten Komponenten verwenden möchten, muss es als Attribut über übergeben werden props.
Weitere Informationen zur neuen Version finden Sie in der Dokumentation zu 1.0.x.
Hier ist eine Hilfeseite speziell zum Navigieren außerhalb Ihrer Komponente
Es wird empfohlen, sich eine Referenz zu schnappen history = createHistory()und diese aufzurufen replaceState.
React-Router 0.13.x Antwort
Ich hatte das gleiche Problem und konnte die Lösung nur mit dem Navigationsmixin finden, das mit dem React-Router geliefert wird.
So habe ich es gemacht
import React from 'react';
import {Navigation} from 'react-router';
let Authentication = React.createClass({
mixins: [Navigation],
handleClick(e) {
e.preventDefault();
this.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
Ich konnte anrufen, transitionTo()ohne darauf zugreifen zu müssen.context
Oder probieren Sie den schicken ES6 class
import React from 'react';
export default class Authentication extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
}
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
}
Authentication.contextTypes = {
router: React.PropTypes.func.isRequired
};
React-Router-Redux
Hinweis: Wenn Sie Redux verwenden, gibt es ein anderes Projekt namens
React-Router-Redux , das Ihnen Redux-Bindungen für ReactRouter bietet und dabei den gleichen Ansatz wie
React-Redux verwendet
React-Router-Redux verfügt über einige Methoden, die eine einfache Navigation innerhalb von Aktionserstellern ermöglichen. Diese können besonders nützlich sein für Benutzer mit vorhandener Architektur in React Native, die dieselben Muster in React Web mit minimalem Aufwand für die Boilerplate verwenden möchten.
Erforschen Sie die folgenden Methoden:
push(location)replace(location)go(number)goBack()goForward()
Hier ist ein Anwendungsbeispiel mit Redux-Thunk :
./actioncreators.js
import { goBack } from 'react-router-redux'
export const onBackPress = () => (dispatch) => dispatch(goBack())
./viewcomponent.js
<button
disabled={submitting}
className="cancel_button"
onClick={(e) => {
e.preventDefault()
this.props.onBackPress()
}}
>
CANCEL
</button>