Solucionat: passar dades navegar reaccionar router dom

El principal problema relacionat amb el pas de dades quan es navega amb React Router DOM és que les dades s'han de passar a la cadena de consulta d'URL. Això vol dir que qualsevol informació sensible s'ha de codificar abans de passar-la, ja que serà visible a l'URL. A més, si les dades són massa grans, poden superar la longitud màxima d'un URL i provocar errors. Finalment, si utilitzeu React Router DOM per navegar entre pàgines dins d'una aplicació, també heu de gestionar manualment l'estat i fer un seguiment dels canvis per assegurar-vos que tots els components tinguin accés a les mateixes dades.

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>
  );
};

// Línia 1: aquesta línia importa el ganxo useHistory de la biblioteca react-router-dom.
// Línia 3: aquesta línia declara una constant anomenada MyComponent que és una funció que retorna JSX.
// Línia 4: aquesta línia declara una constant anomenada history que s'assigna al ganxo useHistory importat de react-router-dom.
// Línia 6: aquesta línia declara una funció anomenada handleClick que pren un paràmetre, dades.
// Línia 7: aquesta línia utilitza l'objecte d'historial per introduir una nova ruta a la pila amb el nom de ruta '/myroute' i les dades d'estat passats com a objecte.
// Línies 9 a 11: aquestes línies retornen JSX que conté un element botó amb un controlador d'esdeveniments onClick que crida a handleClick i passa dades com a argument.

React Router Dom

React Router DOM és una biblioteca d'encaminament per a React que permet als desenvolupadors crear i gestionar rutes dins de les seves aplicacions React. Proporciona els components bàsics necessaris per crear aplicacions web complexes de diverses pàgines amb React, inclosos components com Link, Route, Switch i BrowserRouter. També ofereix funcions com la concordança dinàmica de rutes i el seguiment d'ubicacions. Amb React Router DOM, els desenvolupadors poden crear fàcilment aplicacions d'una sola pàgina amb múltiples vistes i rutes sense haver de gestionar manualment l'URL o l'historial del navegador.

Com passeu les dades per navegar a react-router-Dom

A React Router, les dades es poden passar a través de la navegació mitjançant l'objecte d'estat de l'API d'historial. L'objecte d'estat és accessible mitjançant els accessoris de qualsevol component representat per a component. Per passar dades, podeu afegir-les a l'objecte d'estat quan crideu a la funció de navegació. Per exemple:

const { historial } = this.props;
history.push({
nom de ruta: '/algun/camí',
estat: { someData: 'dades' }
});