Résolu : passer les données naviguer réagir routeur dom

Le principal problème lié à la transmission de données lors de la navigation avec React Router DOM est que les données doivent être transmises dans la chaîne de requête URL. Cela signifie que toute information sensible doit être encodée avant d'être transmise, car elle sera visible dans l'URL. De plus, si les données sont trop volumineuses, elles peuvent dépasser la longueur maximale d'une URL et provoquer des erreurs. Enfin, si vous utilisez React Router DOM pour naviguer entre les pages d'une application, vous devez également gérer manuellement l'état et suivre les modifications pour vous assurer que tous les composants ont accès aux mêmes données.

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// Ligne 1 : cette ligne importe le crochet useHistory de la bibliothèque react-router-dom.
// Ligne 3 : Cette ligne déclare une constante appelée MyComponent qui est une fonction qui renvoie JSX.
// Ligne 4 : Cette ligne déclare une constante appelée history qui est assignée au crochet useHistory importé de react-router-dom.
// Ligne 6 : Cette ligne déclare une fonction appelée handleClick qui prend un paramètre, data.
// Ligne 7 : cette ligne utilise l'objet d'historique pour pousser une nouvelle route sur la pile avec le nom de chemin '/myroute' et les données d'état transmises en tant qu'objet.
// Lignes 9 à 11 : ces lignes renvoient JSX contenant un élément de bouton avec un gestionnaire d'événements onClick qui appelle handleClick et transmet les données en tant qu'argument.

Réagir Routeur Dom

React Router DOM est une bibliothèque de routage pour React qui permet aux développeurs de créer et de gérer des itinéraires au sein de leurs applications React. Il fournit les composants de base nécessaires pour créer des applications Web complexes de plusieurs pages avec React, y compris des composants tels que Link, Route, Switch et BrowserRouter. Il fournit également des fonctionnalités telles que la mise en correspondance dynamique des itinéraires et le suivi de la localisation. Avec React Router DOM, les développeurs peuvent facilement créer des applications d'une seule page avec plusieurs vues et itinéraires sans avoir à gérer manuellement l'URL ou l'historique du navigateur.

Comment transmettez-vous les données à travers la navigation dans react-router-Dom

Dans React Router, les données peuvent être transmises via la navigation à l'aide de l'objet d'état de l'API d'historique. L'objet d'état est accessible via les props de n'importe quel composant rendu par un composant. Pour transmettre des données, vous pouvez les ajouter à l'objet d'état lors de l'appel de la fonction de navigation. Par example:

const { historique } = this.props ;
histoire.push({
chemin : '/un/chemin',
état : { someData: 'data' }
});