Lahendatud: pass data navigate react router dom

Peamine andmete edastamisega seotud probleem React Router DOM-iga navigeerimisel on see, et andmed tuleb edastada URL-i päringustringis. See tähendab, et igasugune tundlik teave tuleb enne edastamist kodeerida, kuna see on URL-is nähtav. Lisaks, kui andmed on liiga suured, võivad need ületada URL-i maksimaalse pikkuse ja põhjustada vigu. Lõpuks, kui kasutate rakenduses lehtede vahel navigeerimiseks React Router DOM-i, peate ka olekut käsitsi haldama ja muudatusi jälgima, et tagada kõikidel komponentidel juurdepääs samadele andmetele.

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. rida: see rida impordib react-ruuter-dom teegist useHistory konksu.
// Rida 3: see rida deklareerib konstandi nimega MyComponent, mis on funktsioon, mis tagastab JSX-i.
// Rida 4: see rida deklareerib konstandi nimega ajalugu, mis on määratud react-router-domist imporditud konksule useHistory.
// Rida 6: see rida deklareerib funktsiooni HandelClick, mis võtab sisse ühe parameetri, andmed.
// 7. rida: see rida kasutab ajalooobjekti, et lükata virnasse uus marsruut teenimega '/myroute' ja objektina edastatud olekuandmed.
// Read 9–11: need read tagastavad JSX-i, mis sisaldab nupuelementi koos onClicki sündmuste töötlejaga, mis kutsub esile HandClicki ja edastab andmed argumendina.

Reageerida ruuter Dom

React Router DOM on Reacti marsruutimisteek, mis võimaldab arendajatel oma Reacti rakendustes marsruute luua ja hallata. See pakub põhikomponente, mis on vajalikud Reactiga keerukate mitmeleheliste veebirakenduste loomiseks, sealhulgas sellised komponendid nagu link, marsruut, lüliti ja BrowserRouter. See pakub ka selliseid funktsioone nagu dünaamiline marsruudi sobitamine ja asukoha jälgimine. React Router DOM-iga saavad arendajad hõlpsasti luua ühele lehele mitme vaate ja marsruudiga rakendusi, ilma et peaksid URL-i või brauseri ajalugu käsitsi haldama.

Kuidas edastada andmeid läbi navigeerimise react-ruuter-Domis

React Routeris saab andmeid edastada läbi navigeerimise, kasutades ajaloo API olekuobjekti. Olekuobjektile pääseb juurde mis tahes komponendi rekvisiitide kaudu, mida renderdab a komponent. Andmete edastamiseks saate need navigeerimisfunktsiooni kutsudes olekuobjekti lisada. Näiteks:

const { ajalugu } = this.props;
history.push({
teenimi: '/some/path',
olek: { someData: 'data' }
});