Στην τρέχουσα έκδοση του React Router (v3) μπορώ να δεχτώ μια απόκριση διακομιστή και να χρησιμοποιήσω το browserHistory.push
για να μεταβώ στην κατάλληλη σελίδα απόκρισης. Ωστόσο, αυτό δεν είναι διαθέσιμο στην v4 και δεν είμαι σίγουρος ποιος είναι ο κατάλληλος τρόπος για να το χειριστώ.
Σε αυτό το παράδειγμα, χρησιμοποιώντας το Redux, το components/app-product-form.js καλεί το this.props.addProduct(props)
όταν ένας χρήστης υποβάλλει τη φόρμα. Όταν ο διακομιστής επιστρέφει επιτυχία, ο χρήστης μεταφέρεται στη σελίδα του Καλαθιού.
// 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
});
}
Πώς μπορώ να κάνω ανακατεύθυνση στη σελίδα του Καλαθιού από τη λειτουργία για το React Router v4;
Το React Router v4 είναι θεμελιωδώς διαφορετικό από το v3 (και τα προηγούμενα) και δεν μπορείτε να κάνετε το browserHistory.push()
όπως παλιά.
Αυτή η συζήτηση φαίνεται να σχετίζεται αν θέλετε περισσότερες πληροφορίες:
- Η δημιουργία ενός νέου
browserHistory
δεν θα λειτουργήσει επειδή το<BrowserRouter>
δημιουργεί τη δική του περίπτωση ιστορικού και ακούει για αλλαγές σε αυτό. Έτσι, μια διαφορετική περίπτωση θα αλλάξει το url αλλά δεν θα ενημερώσει το<BrowserRouter>
.- Το
browserHistory
δεν εκτίθεται από το react-router στο v4, μόνο στο v2.
Αντ' αυτού έχετε μερικές επιλογές για να το κάνετε αυτό:
withRouter
.Αντ' αυτού θα πρέπει να χρησιμοποιήσετε το συστατικό υψηλής τάξης withRouter
και να το τυλίξετε στο συστατικό που θα προωθήσει στο ιστορικό. Για παράδειγμα:
<!-- language: lang-js -->,
import React from "react",
import { withRouter } from "react-router-dom",
class MyComponent extends React.Component {
...
myFunction() {
this.props.history.push("/some/Path"),
}
...
}
export default withRouter(MyComponent),
Δείτε την επίσημη τεκμηρίωση για περισσότερες πληροφορίες:
Μπορείτε να αποκτήσετε πρόσβαση στις ιδιότητες του αντικειμένου `
<Route>
και στο πλησιέστερο `<Route>
'smatch
μέσω του συστατικού ανώτερης τάξης withRouter. withRouter θα επανεκτείνει το συστατικό του κάθε φορά που αλλάζει η διαδρομή με τα ίδια props με τα props απόδοσης του `<Route>
:{ match, location, history }
.
context
.Η χρήση του context μπορεί να είναι μια από τις ευκολότερες λύσεις, αλλά επειδή είναι ένα πειραματικό API είναι ασταθές και δεν υποστηρίζεται. Χρησιμοποιήστε το μόνο όταν όλα τα υπόλοιπα αποτυγχάνουν. Ακολουθεί ένα παράδειγμα:
<!-- language: lang-js -->,
import React from "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"),
}
...
}
Ρίξτε μια ματιά στην επίσημη τεκμηρίωση για το context:
Αν θέλετε η εφαρμογή σας να είναι σταθερή, μην χρησιμοποιείτε το context. Είναι ένα πειραματικό API και είναι πιθανό να χαλάσει σε μελλοντικές εκδόσεις του React. >, Εάν επιμένετε να χρησιμοποιείτε το context παρά τις προειδοποιήσεις αυτές, προσπαθήστε να απομονώσετε τη χρήση του context σε μια μικρή περιοχή και αποφύγετε την άμεση χρήση του context API όταν είναι δυνατόν, έτσι ώστε να'είναι ευκολότερη η αναβάθμιση όταν αλλάξει το API.
Έτσι το έκανα:
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>
);
}
}
Χρησιμοποιήστε this.props.history.push('/cart');
για να ανακατευθύνετε στη σελίδα του καλαθιού που θα αποθηκευτεί στο αντικείμενο ιστορικού.
Καλή διασκέδαση, Michael.
Το this.context.history.push
δεν θα λειτουργήσει.
Κατάφερα να κάνω το push να λειτουργεί ως εξής:
static contextTypes = {
router: PropTypes.object
}
handleSubmit(e) {
e.preventDefault();
if (this.props.auth.success) {
this.context.router.history.push("/some/Path")
}
}