Riješeno: proslijediti podatke navigirati reagovati ruter dom

Glavni problem vezan za prosljeđivanje podataka prilikom navigacije pomoću React Router DOM-a je taj što podaci moraju biti proslijeđeni u URL upitnom nizu. 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 dužinu URL-a i uzrokovati greške. Konačno, ako koristite React Router DOM za navigaciju između stranica unutar aplikacije, morate također 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: Ova linija uvozi useHistory kuku iz biblioteke react-router-dom.
// Linija 3: Ova linija deklarira konstantu pod nazivom MyComponent koja je funkcija koja vraća JSX.
// Linija 4: Ova linija deklarira konstantu koja se zove historija koja je dodijeljena zakačici useHistory uvezenoj iz react-router-doma.
// Red 6: Ova linija deklarira funkciju zvanu handleClick koja uzima jedan parametar, podatke.
// Linija 7: Ovaj red koristi historijski objekt da gurne novu rutu na stog s imenom putanje '/myroute' i podacima o stanju proslijeđenim kao objekt.
// Redovi 9 – 11: Ovi redovi vraćaju JSX koji sadrži element gumba s onClick obrađivačem događaja koji poziva handleClick i prosljeđuje podatke kao argument.

React Router Dom

React Router DOM je biblioteka rutiranja za React koja omogućava programerima da kreiraju i upravljaju rutama unutar svojih React aplikacija. Pruža osnovne komponente neophodne za izgradnju složenih web aplikacija sa više stranica sa React-om, uključujući komponente kao što su Link, Route, Switch i BrowserRouter. Također nudi funkcije kao što su dinamičko podudaranje ruta i praćenje lokacije. Uz React Router DOM, programeri mogu lako kreirati aplikacije na jednoj stranici sa više prikaza i ruta bez potrebe da ručno upravljaju URL-om ili historijom pretraživača.

Kako prenosite podatke kroz navigaciju u react-router-Dom

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

const { historija } = this.props;
history.push({
ime putanje: '/neki/putanja',
stanje: { someData: 'podaci' }
});