J'utilise React-Router-DOM V 4.3.1 pour un routage côté client. Je suis assez nouveau pour réagir et ne pas comprendre comment transmettre des données d'une vue à l'autre sans utiliser les paramètres d'URL. En angulaire, le routeur angulaire dispose d'une propriété de données dans laquelle vous pouvez passer des données associées à un itinéraire. Un exemple serait:
Pouvez-vous faire la même chose dans React-Router-Dom? Sinon, comment recommanderiez-vous que je passe des données dans réagir?
Merci d'avance pour l'aide! Constoirs: itinéraires = [
{
chemin: 'héros /: id',
Composant: hérodetailcomponent,
Data: {Titre: 'Hero Détail'}
},
];
3 Réponses :
Eh bien, vous pouvez utiliser l'API de contexte pour créer une sorte d'AppState global que vous pourriez mettre à jour dans votre premier composant et utiliser dans votre deuxième composant.
Vous pouvez également abuser de l'API localStorage en définissant une clé avec les données du premier composant et en l'obtenant dans l'autre.
Cependant, ces deux sont des solutions de contournement qui ne devraient pas être utilisées. Pourquoi voulez-vous rediriger vers une page mais ne pas transmettre de données à l'aide de paramètres URL?
Merci pour la réponse @manavm. Oui, je pensais utiliser LocalStorage. L'API de contexte que je dois lire plus. Pour ce cas particulier, la raison pour laquelle je ne veux pas utiliser les paramètres d'URL est à cause du référencement. Le propriétaire du produit souhaite utiliser certains mots-clés de l'URL, et l'ID que j'ai besoin de passer n'est malheureusement pas un de ces mots-clés.
Je vois. Selon le type de données, vous pouvez utiliser le contexte API à la place. Par exemple, si vos données ont quelque chose qui ne conservera pas son formulaire précédent s'il est sérialisé (une instance de classe, comme un objet de date de moments, par exemple). Cependant, si c'est juste un tas de primitives, je suppose que LocalStorage fonctionnera aussi bien.
<Link to={{ pathname: 'hero/:id', state: { title: 'Hero Detail'} }}>My route</Link>
N'utilisez pas les fonctions de flèche à l'intérieur de la composante Prop. Cela créerait un nouveau composant à chaque fois. Utilisez le rendu plutôt que si vous souhaitez passer des accessoires au composant rendu.
Cela semble être ce que je cherche. Testé
Il y a plusieurs solutions. Réagir étant une bibliothèque, pas un cadre, ne vous oblige pas en un seul.
Un moyen est d'utiliser l'API de contexte. C'est comme un lien avec un objet partagé entre différents composants.
Un autre est REDUX, qui utilise le contexte en dessous et vous donne un magasin unique pour toute l'application. Vous changez de valeurs d'expédition des actions au magasin, il est donc un peu délicat d'apprendre la première fois.
L'utilisation d'une bibliothèque de flux ouvrirait beaucoup d'options différentes, mais il est plus difficile d'entrer dans. Vérifiez que vous référez si vous voulez aller de cette façon.
Une approche de flux d'un homme pauvre qui peut vous servir utilise le document en tant que bus pour réussir les données de données, à l'aide de AddeventListeners pour recevoir des données et expédiez un nouveau CustoMvent pour l'envoyer.
Suivant est le plus simple de tous, partage un objet simple. En utilisant les importations formant vos composants, vous pouvez importer le même objet sur les deux et une seule instance où les données peuvent être partagées. JavaScript simple. Ce n'est pas le moyen de réagir, car les changements ne déclencheront pas un repeindre sur le composant.