Riješeno: proslijedite podatke navigirajte reagirajte usmjerivač dom

Glavni problem povezan s prosljeđivanjem podataka prilikom navigacije s React Router DOM-om je da se podaci moraju proslijediti u nizu upita URL-a. To znači da sve osjetljive informacije moraju biti kodirane prije prosljeđivanja jer će biti vidljive u URL-u. Osim toga, ako su podaci preveliki, mogu premašiti maksimalnu duljinu URL-a i uzrokovati pogreške. Konačno, ako koristite React Router DOM za navigaciju između stranica unutar aplikacije, također morate ručno upravljati stanjem i pratiti promjene kako biste osigurali da sve komponente imaju pristup istim podacima.

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

// Red 1: Ovaj red uvozi useHistory hook iz biblioteke react-router-dom.
// Redak 3: Ovaj redak deklarira konstantu koja se zove MyComponent koja je funkcija koja vraća JSX.
// Redak 4: Ovaj redak deklarira konstantu koja se zove history koja je dodijeljena useHistory kuki uvezenoj iz react-router-dom.
// Redak 6: Ovaj redak deklarira funkciju nazvanu handleClick koja uzima jedan parametar, podatke.
// Redak 7: Ovaj redak koristi objekt povijesti za guranje nove rute na stog s nazivom putanje '/myroute' i podacima o stanju proslijeđenim kao objekt.
// Redovi 9 – 11: Ovi redovi vraćaju JSX koji sadrži element gumba s rukovateljem događaja onClick koji poziva handleClick i prosljeđuje podatke kao argument.

Reakcijski usmjerivač Dom

React Router DOM je biblioteka za usmjeravanje za React koja programerima omogućuje stvaranje i upravljanje rutama unutar svojih React aplikacija. Pruža osnovne komponente potrebne za izgradnju složenih web aplikacija s više stranica s Reactom, uključujući komponente kao što su Link, Route, Switch i BrowserRouter. Također nudi značajke kao što su dinamičko podudaranje rute i praćenje lokacije. Uz React Router DOM, programeri mogu jednostavno kreirati aplikacije na jednoj stranici s više pogleda i ruta bez potrebe za ručnim upravljanjem URL-om ili poviješću preglednika.

Kako prosljeđujete podatke kroz navigaciju u react-router-Dom

U React Routeru, podaci se mogu proslijediti kroz navigaciju pomoću objekta stanja povijesnog API-ja. Objektu stanja je moguće pristupiti kroz props bilo koje komponente koju prikazuje a komponenta. Da biste proslijedili podatke, možete ih dodati u objekt stanja kada pozivate funkciju navigacije. Na primjer:

const { povijest } = this.props;
history.push({
naziv putanje: '/neki/staza',
stanje: { someData: 'podaci' }
});