Comment faire un redirect avec le composant react-router-dom après une requête POST ?
Le module "react-router-dom" a modifié la manière dont sont gérées les redirections avec la librairie ReactJS. Il existe maintenant plusieurs méthodes qui utilisent l'API Javascript History ou bien une redirection HTTP classique. Lorsque vous venez d'effectuer une requête POST, vous devez en principe rediriger ensuite l'utilisateur vers une nouvelle page de votre application car une requête POST sert à envoyer des données.
Quand on vient d'effectuer une requête POST, on se trouve dans une méthode qui ne peut pas gérer les redirections. La solution la plus simple consiste à utiliser le "state" du composant. Ajouter un booléen au "state" qui sera chargé de contrôler la redirection.
class monComposant extends React.Component {
state = { redirection: false }
}
Pour déclencher ensuite la redirection, il faut modifier la variable du "state" une fois que la requête POST a été effectuée. Afin d'effectuer la requête POST avec React, vous pouvez utiliser la librairie AXIOS, qui effectue des requêtes asynchrones.
requetePost () {
axios.post(/*Paramètre de la requête POST*/)
.then(() => this.setState({ redirection: true }));
}
Pour effectuer une redirection, il existe une balise "React" qui indique à l'application de rediriger l'internaute : il s'agit de la balise "<redirect>". On précise dans l'attribut "to" l'URL vers laquelle rediriger. Pour afficher cette balise, on fait appel à la méthode "render()". Cette méthode est appelée à chaque modification du "state". Il suffit de conditionner l'affichage de la balise "<redirect>" à un test du booléen.
render () {
const { redirection } = this.state;
if (redirection) {
//Affichage de la redirection
return <Redirect to='/mon-url'/>;
}
//Affichage des autres éléments, par exemple un formulaire
//Si la redirection est affichée, on ne passe pas dans ce code
return <AffichageDuFormulaire/>;
Il existe d'autres méthodes de redirection avec notamment l'objet "history", en utilisant la librairie Redux (https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/redux.md).