Mit react-router
kann ich das Element Link
verwenden, um Links zu erstellen, die nativ von react router verarbeitet werden.
Ich sehe, dass es intern this.context.transitionTo(...)
aufruft.
Ich möchte eine Navigation durchführen, aber nicht über einen Link, sondern zum Beispiel über eine Dropdown-Auswahl. Wie kann ich das im Code machen? Was ist this.context
?
Ich habe das Mixin "Navigation" gesehen, aber kann ich das auch ohne Mixins machen?
React-Router 5.1.0+ Antwort (mit Hooks und React >16.8)
Sie können den neuen useHistory
-Hook für funktionale Komponenten und programmatische Navigation verwenden:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
React-Router 4.0.0+ Antwort
In 4.0 und höher verwenden Sie die History als Prop Ihrer Komponente.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
HINWEIS: this.props.history existiert nicht, wenn Ihre Komponente nicht von <Route>
gerendert wurde. Sie sollten <Route path="..." component={IhreKomponente}/>
verwenden, um this.props.history in YourComponent zu haben
React-Router 3.0.0+ Antwort
In 3.0 und höher, verwenden Sie den Router als Prop Ihrer Komponente.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+ Antwort
In 2.4 und höher, verwenden Sie 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 der Version 1.x, so dass es keine Notwendigkeit für einen Upgrade Guide gibt. Ein Blick auf die Beispiele sollte genügen.
Wenn Sie jedoch auf das neue Muster umsteigen möchten, gibt es ein browserHistory Modul innerhalb des Routers, auf das Sie mit
importieren { browserHistory } aus 'react-router'`
Jetzt haben Sie Zugriff auf Ihre Browser-History, so dass Sie Dinge wie Push, Replace, etc. machen können. Zum Beispiel:
browserHistory.push('/some/path')
Weitere Lektüre: Histories und Navigation
React-Router 1.x.x Antwort
Ich werde nicht auf die Details des Upgrades eingehen. Sie können dies im Upgrade Guide nachlesen.
Die wichtigste Änderung in Bezug auf die Frage hier ist der Wechsel von Navigation mixin zu History. Jetzt wird die Browser historyAPI verwendet, um die Route zu ändern, also werden wir von nun an pushState()
verwenden.
Hier's ein Beispiel mit Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Beachten Sie, dass diese History
vom rackt/history Projekt stammt. Nicht von React-Router selbst.
Wenn Sie Mixin aus irgendeinem Grund nicht verwenden wollen (vielleicht wegen der ES6 Klasse), dann können Sie auf die History, die Sie vom Router erhalten, über this.props.history
zugreifen. Sie wird nur für die Komponenten zugänglich sein, die von Ihrem Router gerendert werden. Wenn Sie sie also in einer untergeordneten Komponente verwenden wollen, muss sie als Attribut über "props" weitergegeben werden.
Sie können mehr über die neue Version in der [1.0.x Dokumentation] (https://github.com/rackt/react-router/tree/1.0.x/docs) lesen.
Hier ist eine Hilfeseite speziell zur Navigation außerhalb der Komponente
Es wird empfohlen, eine Referenz history = createHistory()
zu nehmen und replaceState
darauf aufzurufen.
React-Router 0.13.x Antwort
Ich hatte das gleiche Problem und konnte die Lösung nur mit dem Navigation-Mixin finden, das im React-Router enthalten ist.
Hier's, wie ich es tat
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 transitionTo()
aufrufen, ohne auf .context
zugreifen zu müssen
Oder Sie könnten die ausgefallene ES6 Klasse
ausprobieren
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 weiteres Projekt namens React-Router-Redux, das Ihnen Redux-Bindungen für ReactRouter bietet, wobei es in etwa den gleichen Ansatz wie React-Redux tut
React-Router-Redux hat ein paar Methoden zur Verfügung, die ein einfaches Navigieren innerhalb von Action Creators ermöglichen. Diese können besonders nützlich für Leute sein, die eine bestehende Architektur in React Native haben und die gleichen Muster in React Web mit minimalem Boilerplate-Overhead nutzen wollen.
Lernen Sie die folgenden Methoden kennen:
push(location)
Ersetzen(Ort)
go(Zahl)
Zurück()
Vorwärts gehen()
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>
React-Router v2
In der neuesten Version (v2.0.0-rc5
) ist die empfohlene Navigationsmethode das direkte Schieben auf das History Singleton. Sie können das in Aktion sehen im Navigieren außerhalb von Komponenten doc.
Relevanter Auszug:
import { browserHistory } from 'react-router';
browserHistory.push('/some/path');
Wenn Sie die neuere React-Router-API verwenden, müssen Sie die history
von this.props
innerhalb von Komponenten verwenden:
this.props.history.push('/some/path');
Es bietet auch pushState
an, aber das ist laut protokollierten Warnungen veraltet.
Wenn Sie react-router-redux
verwenden, bietet es eine push
Funktion, die Sie wie folgt versenden können:
import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));
Diese Funktion kann jedoch nur dazu verwendet werden, die URL zu ändern und nicht, um tatsächlich zur Seite zu navigieren.
Warnung: diese Antwort deckt nur ReactRouter Versionen vor 1.0 ab
Ich werde diese Antwort mit 1.0.0-rc1 Anwendungsfällen nach aktualisieren!
Sie können dies auch ohne Mixins tun.
let Authentication = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
Das Problem mit Kontexten ist, dass man nicht darauf zugreifen kann, es sei denn, man definiert die contextTypes
in der Klasse.
Was den Kontext angeht, so ist es ein Objekt, wie props, das von Eltern zu Kindern weitergegeben wird, aber es wird implizit weitergegeben, ohne dass props jedes Mal neu deklariert werden muss. Siehe https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html