Comment transmettre efficacement des données entre les pages à l'aide de React Router ?

Comment transmettre des données d'une page à une autre page à l'aide de React Router

Lorsque vous travaillez avec React Router, vous pouvez rencontrer des situations où vous avez besoin pour transmettre des données d'une page à une autre, comme afficher les détails de l'utilisateur sur un écran différent. Voici plusieurs options pour transmettre des données :

Option 1 : Passer l'état de la route

• Utilisez le composant Link dans React Router DOM v6 ou le composant Navigate dans v5 et définissez l'accessoire d'état.
• Décompressez l'état de l'objet de localisation sur le récepteur page.
• Avantage : l'état n'est pas visible dans l'URL et maintient l'interface utilisateur propre.

Option 2 : transmettre quelque chose dans le chemin de l'URL

• Ajoutez les données au chemin de l'URL à l'aide d'un composant Link ou d'une navigation par programmation.
• Accédez au paramètre depuis le objet props.match sur la page de réception.
• Avantage : les données sont stockées dans l'URL et peuvent être facilement partagées.

Option 3 : transmettre quelque chose dans la requête d'URL String

• Utilisez l'accessoire de recherche sur le composant Link ou la navigation par programmation pour transmettre des données sous forme de requête paramètres.
• Utilisez le hook useSearchParams (v6) ou l'objet URLSearchParams (v5) pour analyser les paramètres de requête sur la page de réception.
• Avantage : peut facilement transmettre de petites quantités de données.

Considérations pour la classe React Composants

• La version 6 de React Router DOM a supprimé les accessoires de route et le withRouter HOC.
• Pour accéder aux accessoires de route dans les composants de classe, utilisez un withRouter HOC personnalisé qui intègre les éléments nécessaires crochets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!