Redirection vers une autre route dans React Router
Maintenant, les données saisies dans le formulaire lors de l'édition du produit sont enregistrées, mais il y a un MAIS - après l'enregistrement des données, nous restons sur la page du formulaire, alors que nous devons retourner sur la page du produit. C'est là que la redirection va nous aider, nous allons la découvrir dans cette leçon.
Ouvrons le fichier edit.jsx
et importons redirect depuis
la bibliothèque :
import { redirect } from 'react-router-dom';
Puis faisons en sorte que la fonction
action retourne désormais
non pas 1, mais qu'elle nous
redirige vers la route souhaitée. Dans ce cas,
nous devons retourner sur la page du produit :
return redirect(`/products/${params.productId}`);
Maintenant, en cliquant sur le bouton de sauvegarde, nous retournons sur la page du produit avec les données mises à jour.
Nous pouvons faire la même chose pour l'ajout d'un nouveau produit, car ce serait probablement plus pratique de arriver directement sur le formulaire et de le remplir. Faisons cela.
Pour commencer, nous devons maintenant ouvrir
le fichier root.jsx et importer
redirect, puisque l'ajout
de produits se fait sur la page racine :
import { redirect } from 'react-router-dom';
Reprenons la fonction action et
retournons désormais non pas product,
mais effectuons une redirection vers la page
d'édition :
return redirect(`/products/${product.id}/edit`);
Vérifions cela aussi. Cliquons maintenant sur le bouton d'ajout de produit et nous verrons le formulaire pour son édition.
Prenez l'application que vous avez créée dans les travaux dirigés des leçons précédentes. En utilisant le contenu de la leçon, implémentez-y une redirection vers la page de l'étudiant après avoir cliqué sur le bouton de sauvegarde des données sur la page du formulaire.
Maintenant, implémentez une redirection depuis la page principale vers la page du formulaire d'édition des données de l'étudiant après avoir cliqué sur le bouton d'ajout d'un étudiant dans la liste.
