In der aktuellen Version von React Router (v3) kann ich eine Server-Antwort akzeptieren und browserHistory.push
verwenden, um auf die entsprechende Antwortseite zu gehen. Allerdings ist dies nicht in v4 verfügbar, und ich bin nicht sicher, was der geeignete Weg, dies zu behandeln ist.
In diesem Beispiel, das Redux verwendet, ruft components/app-product-form.js "this.props.addProduct(props)" auf, wenn ein Benutzer das Formular ausfüllt. Wenn der Server einen Erfolg zurückgibt, wird der Benutzer auf die Seite "Warenkorb" weitergeleitet.
// actions/index.js
export function addProduct(props) {
return dispatch =>
axios.post(`${ROOT_URL}/cart`, props, config)
.then(response => {
dispatch({ type: types.AUTH_USER });
localStorage.setItem('token', response.data.token);
browserHistory.push('/cart'); // no longer in React Router V4
});
}
Wie kann ich eine Weiterleitung zur Cart-Seite aus der Funktion für React Router v4 erstellen?
React Router v4 unterscheidet sich grundlegend von v3 (und früher) und man kann nicht wie früher browserHistory.push()
machen.
[Diese Diskussion] (https://github.com/ReactTraining/react-router/issues/4059) scheint verwandt, wenn Sie mehr Informationen wünschen:
Das Erstellen einer neuen browserHistory
wird nicht funktionieren, weil <BrowserRouter>
seine eigene History-Instanz erstellt und auf Änderungen in dieser lauscht. Eine andere Instanz wird also die URL ändern, aber nicht den <BrowserRouter>
aktualisieren.
Stattdessen haben Sie einige Optionen, um dies zu tun:
withRouter
-Komponente hoher OrdnungStattdessen sollten Sie die withRouter
High-Order-Komponente verwenden und diese mit der Komponente verbinden, die in die Historie geschoben wird. Zum Beispiel:
<!-- language: lang-js -->
importiere React von "react";
import { withRouter } from "react-router-dom";
class MyComponent extends React.Component {
...
myFunction() {
this.props.history.push("/some/Path");
}
...
}
export default withRouter(MeineKomponente);
Weitere Informationen finden Sie in der [offiziellen Dokumentation] (https://reacttraining.com/react-router/web/api/withRouter):
Sie können über die übergeordnete Komponente withRouter auf die Eigenschaften des Objekts history
und das nächstgelegene <Route>
's match
zugreifen. withRouter rendert seine Komponente jedes Mal neu, wenn sich die Route ändert, mit denselben Props wie <Route>
render props: { match, location, history }
.
Context
APIDie Verwendung von "Context" mag eine der einfachsten Lösungen sein, aber da es sich um eine experimentelle API handelt, ist sie unstabil und wird nicht unterstützt. Verwenden Sie sie nur, wenn alles andere versagt. Hier's ein Beispiel:
<!-- Sprache: lang-js -->
import React aus "react";
import PropTypes from "prop-types";
class MyComponent extends React.Component {
static contextTypes = {
Router: PropTypes.Object
}
constructor(props, context) {
super(props, context);
}
...
myFunction() {
this.context.router.history.push("/some/Path");
}
...
}
Werfen Sie einen Blick in die [offizielle Dokumentation] (https://reactjs.org/docs/context.html) zu context:
Wenn Sie wollen, dass Ihre Anwendung stabil ist, verwenden Sie context nicht. Es ist eine experimentelle API und es ist wahrscheinlich, dass sie in zukünftigen Versionen von React kaputt geht.
Wenn Sie trotz dieser Warnungen darauf bestehen, Kontext zu verwenden, versuchen Sie, die Verwendung von Kontext auf einen kleinen Bereich zu beschränken und vermeiden Sie, wenn möglich, die direkte Verwendung der Kontext-API, damit es einfacher ist, ein Upgrade durchzuführen, wenn sich die API ändert.
So habe ich es gemacht:
import React, {Component} from 'react';
export default class Link extends Component {
constructor(props) {
super(props);
this.onLogout = this.onLogout.bind(this);
}
onLogout() {
this.props.history.push('/');
}
render() {
return (
<div>
<h1>Your Links</h1>
<button onClick={this.onLogout}>Logout</button>
</div>
);
}
}
Verwenden Sie this.props.history.push('/cart');
, um zur Warenkorb-Seite umzuleiten, die im History-Objekt gespeichert wird.
Viel Spaß, Michael.
this.context.history.push" wird nicht funktionieren.
Ich habe es geschafft, Push wie folgt zum Laufen zu bringen:
static contextTypes = {
router: PropTypes.object
}
handleSubmit(e) {
e.preventDefault();
if (this.props.auth.success) {
this.context.router.history.push("/some/Path")
}
}