Dans la version actuelle de React Router (v3), je peux accepter une réponse du serveur et utiliser browserHistory.push
pour aller à la page de réponse appropriée. Cependant, ceci n’est pas disponible dans la v4, et je ne suis pas sûr de la manière appropriée de gérer ceci.
Dans cet exemple, utilisant Redux, components/app-product-form.js appelle this.props.addProduct(props)
quand un utilisateur soumet le formulaire. Lorsque le serveur renvoie un succès, l'utilisateur est amené à la page du panier.
// 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
});
}
Comment faire une redirection vers la page Panier à partir de la fonction pour React Router v4 ?
React Router v4 est fondamentalement différent de la v3 (et des précédentes) et vous ne pouvez pas faire browserHistory.push()
comme vous le faisiez auparavant.
Cette discussion semble être en rapport si vous voulez plus d'informations :
- Créer une nouvelle
browserHistory
ne fonctionnera pas parce que<BrowserRouter>
crée sa propre instance d'historique, et écoute les changements sur celle-ci. Donc une instance différente changera l'url mais ne mettra pas à jour le<BrowserRouter>
.browserHistory
n'est pas exposé par react-router dans la v4, seulement dans la v2.
Au lieu de cela, vous avez quelques options pour le faire :
withRouter
.Au lieu de cela, vous devriez utiliser le composant d'ordre supérieur withRouter
, et l'envelopper dans le composant qui va pousser vers l'historique. Par exemple :
<!-- language : lang-js -->
import React de "react" ;
import { withRouter } de "react-router-dom" ;
class MyComponent extends React.Component {
...
myFunction() {
this.props.history.push("/some/Path" ;);
}
...
}
export default withRouter(MyComponent) ;
Consultez la [documentation officielle] (https://reacttraining.com/react-router/web/api/withRouter) pour plus d'informations :
Vous pouvez accéder aux propriétés de l'objet
history
et à la<Route>
'smatch
la plus proche via le composant d'ordre supérieur withRouter. withRouter effectuera un nouveau rendu de son composant à chaque fois que l'itinéraire changera avec les mêmes props que ceux du rendu de<Route>
:{ match, location, history }
.
context
.L'utilisation du contexte pourrait être l'une des solutions les plus simples, mais étant une API expérimentale, elle est instable et non supportée. Ne l'utilisez que lorsque tout le reste échoue. Voici un exemple :
<!-- language : lang-js -->
import React from "react" ;
import PropTypes from "prop-types" ;
class MyComponent extends React.Component {
static contextTypes = {
routeur : PropTypes.objet
}
constructor(props, context) {
super(props, contexte) ;
}
...
myFunction() {
this.context.router.history.push("/some/Path" ;);
}
...
}
Jetez un coup d'œil à la [documentation officielle] (https://reactjs.org/docs/context.html) sur le contexte :
Si vous voulez que votre application soit stable, n'utilisez pas context. Il s'agit d'une API expérimentale et il est probable qu'elle ne fonctionne plus dans les futures versions de React.
Si vous persistez à utiliser le contexte malgré ces avertissements, essayez d’isoler votre utilisation du contexte dans une petite zone et évitez d’utiliser directement l’API du contexte lorsque c’est possible, afin de faciliter la mise à niveau lorsque l’API change.
C'est comme ça que j'ai fait :
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>
);
}
}
Utilisez this.props.history.push('/cart' ;);
pour rediriger vers la page du panier qui sera enregistrée dans l'objet historique.
Amusez-vous bien, Michael.
this.context.history.push
ne fonctionnera pas.
J'ai réussi à faire fonctionner push comme ceci :
static contextTypes = {
router: PropTypes.object
}
handleSubmit(e) {
e.preventDefault();
if (this.props.auth.success) {
this.context.router.history.push("/some/Path")
}
}