Rezolvat: transmiteți date navigați reacționați router dom

Principala problemă legată de transmiterea datelor atunci când navigați cu React Router DOM este că datele trebuie transmise în șirul de interogare URL. Aceasta înseamnă că orice informație sensibilă trebuie să fie codificată înainte de a fi transmisă, deoarece va fi vizibilă în adresa URL. În plus, dacă datele sunt prea mari, acestea pot depăși lungimea maximă a unei adrese URL și pot provoca erori. În cele din urmă, dacă utilizați React Router DOM pentru a naviga între paginile dintr-o aplicație, trebuie, de asemenea, să gestionați manual starea și să urmăriți modificările pentru a vă asigura că toate componentele au acces la aceleași date.

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

// Linia 1: Această linie importă cârligul useHistory din biblioteca react-router-dom.
// Linia 3: Această linie declară o constantă numită MyComponent, care este o funcție care returnează JSX.
// Linia 4: Această linie declară o constantă numită istoric care este atribuită cârligului useHistory importat din react-router-dom.
// Linia 6: Această linie declară o funcție numită handleClick care preia un parametru, date.
// Linia 7: Această linie folosește obiectul istoric pentru a împinge o nouă rută pe stivă cu calea „/myroute” și datele de stare transmise ca obiect.
// Liniile 9 – 11: Aceste linii returnează JSX care conține un element buton cu un handler de evenimente onClick care apelează handleClick și transmite date ca argument.

React Router Dom

React Router DOM este o bibliotecă de rutare pentru React care permite dezvoltatorilor să creeze și să gestioneze rute în aplicațiile lor React. Acesta oferă componentele de bază necesare pentru a construi aplicații web complexe, cu mai multe pagini cu React, inclusiv componente precum Link, Route, Switch și BrowserRouter. De asemenea, oferă funcții precum potrivirea dinamică a rutei și urmărirea locației. Cu React Router DOM, dezvoltatorii pot crea cu ușurință aplicații cu o singură pagină cu mai multe vizualizări și rute, fără a fi nevoiți să gestioneze manual adresa URL sau istoricul browserului.

Cum treceți datele prin navigare în react-router-Dom

În React Router, datele pot fi transmise prin navigare folosind obiectul de stare al API-ului istoric. Obiectul de stare este accesibil prin suporturile oricărei componente redate de a componentă. Pentru a transmite date, le puteți adăuga la obiectul de stare atunci când apelați funcția de navigare. De exemplu:

const { history } = this.props;
history.push({
nume cale: „/unele/cale”,
stare: { someData: 'date' }
});