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
const { povijest } = this.props;
history.push({
naziv putanje: '/neki/staza',
stanje: { someData: 'podaci' }
});