Išspręsta: perduoti duomenis navigate react router dom

Pagrindinė problema, susijusi su duomenų perdavimu naršant naudojant React Router DOM, yra ta, kad duomenys turi būti perduoti URL užklausos eilutėje. Tai reiškia, kad bet kokia neskelbtina informacija turi būti užkoduota prieš perduodant, nes ji bus matoma URL. Be to, jei duomenys yra per dideli, jie gali viršyti didžiausią URL ilgį ir sukelti klaidų. Galiausiai, jei naudojate „React Router DOM“, norėdami naršyti tarp programos puslapių, taip pat turite rankiniu būdu valdyti būseną ir sekti pakeitimus, kad užtikrintumėte, jog visi komponentai turėtų prieigą prie tų pačių duomenų.

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

// 1 eilutė: ši eilutė importuoja „useHistory Hook“ iš „react-router-dom“ bibliotekos.
// 3 eilutė: ši eilutė deklaruoja konstantą, vadinamą „MyComponent“, kuri yra funkcija, grąžinanti JSX.
// 4 eilutė: ši eilutė deklaruoja konstantą, vadinamą istorija, kuri priskiriama useHistory kabliui, importuotam iš react-router-dom.
// 6 eilutė: ši eilutė deklaruoja funkciją, vadinamą handleClick, kuri paima vieną parametrą, duomenis.
// 7 eilutė: ši eilutė naudoja istorijos objektą, kad į steką įstumtų naują maršrutą su kelio pavadinimu „/myroute“ ir būsenos duomenys, perduoti kaip objektas.
// 9–11 eilutės: šiose eilutėse pateikiamas JSX, kuriame yra mygtuko elementas su onClick įvykių tvarkykle, kuri iškviečia handelClick ir perduoda duomenis kaip argumentą.

Reaguoti maršrutizatorius Dom

„React Router“ DOM yra „React“ maršruto parinkimo biblioteka, leidžianti kūrėjams kurti ir valdyti maršrutus savo „React“ programose. Jame pateikiami pagrindiniai komponentai, reikalingi kuriant sudėtingas kelių puslapių žiniatinklio programas naudojant „React“, įskaitant tokius komponentus kaip „Link“, „Route“, „Switch“ ir „BrowserRouter“. Jame taip pat yra tokių funkcijų kaip dinaminis maršruto suderinimas ir vietos stebėjimas. Naudodami „React Router DOM“, kūrėjai gali lengvai sukurti vieno puslapio programas su keliais rodiniais ir maršrutais, nevalydami URL ar naršyklės istorijos rankiniu būdu.

Kaip perduodate duomenis per navigaciją „react-router-Dom“.

„React Router“ duomenys gali būti perduodami per navigaciją naudojant istorijos API būsenos objektą. Būsenos objektas pasiekiamas per bet kurio komponento rekvizitus, pateiktus a komponentas. Norėdami perduoti duomenis, galite įtraukti juos į būsenos objektą, kai iškviečiate navigacijos funkciją. Pavyzdžiui:

const { istorija } = this.props;
history.push({
kelio pavadinimas: '/some/path',
būsena: { someData: 'data'}
});