Rešeno: posredovanje podatkov navigacija reakcija usmerjevalnik dom

Glavna težava v zvezi s posredovanjem podatkov pri krmarjenju z React Router DOM je, da je treba podatke posredovati v nizu poizvedbe URL. To pomeni, da morajo biti vsi občutljivi podatki kodirani, preden se posredujejo, saj bodo vidni v URL-ju. Poleg tega, če so podatki preveliki, lahko presežejo največjo dolžino URL-ja in povzročijo napake. Nazadnje, če uporabljate React Router DOM za krmarjenje med stranmi znotraj aplikacije, morate tudi ročno upravljati stanje in spremljati spremembe, da zagotovite, da imajo vse komponente dostop do istih podatkov.

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

// Vrstica 1: Ta vrstica uvozi kljuko useHistory iz knjižnice react-router-dom.
// Vrstica 3: Ta vrstica deklarira konstanto, imenovano MyComponent, ki je funkcija, ki vrne JSX.
// Vrstica 4: Ta vrstica deklarira konstanto, imenovano history, ki je dodeljena kljuki useHistory, uvoženi iz react-router-dom.
// Vrstica 6: Ta vrstica deklarira funkcijo, imenovano handleClick, ki sprejme en parameter, podatke.
// Vrstica 7: Ta vrstica uporablja objekt zgodovine za potiskanje nove poti na sklad z imenom poti '/myroute' in podatki o stanju, posredovanimi kot objekt.
// Vrstice 9–11: Te vrstice vrnejo JSX, ki vsebuje element gumba z obdelovalcem dogodkov onClick, ki kliče handleClick in posreduje podatke kot argument.

Reakcijski usmerjevalnik Dom

React Router DOM je usmerjevalna knjižnica za React, ki razvijalcem omogoča ustvarjanje in upravljanje poti znotraj njihovih aplikacij React. Zagotavlja osnovne komponente, potrebne za izdelavo kompleksnih, večstranskih spletnih aplikacij z Reactom, vključno s komponentami, kot so Link, Route, Switch in BrowserRouter. Ponuja tudi funkcije, kot sta dinamično ujemanje poti in sledenje lokaciji. Z React Router DOM lahko razvijalci preprosto ustvarijo enostranske aplikacije z več pogledi in potmi, ne da bi morali ročno upravljati URL ali zgodovino brskalnika.

Kako posredujete podatke prek navigacije v react-router-Dom

V React Routerju je mogoče podatke posredovati skozi navigacijo z uporabo objekta stanja zgodovinskega API-ja. Objekt stanja je dostopen prek rekvizitov katere koli komponente, ki jo upodobi a komponento. Če želite posredovati podatke, jih lahko dodate v objekt stanja, ko kličete navigacijsko funkcijo. Na primer:

const {zgodovina} = this.props;
history.push({
ime poti: '/some/path',
stanje: { someData: 'podatki' }
});