Vyriešené: prejsť dáta navigovať reagovať router dom

Hlavným problémom súvisiacim s odovzdávaním údajov pri navigácii pomocou React Router DOM je, že údaje sa musia odovzdávať v reťazci dopytu URL. To znamená, že všetky citlivé informácie musia byť pred odoslaním zakódované, pretože budú viditeľné v adrese URL. Okrem toho, ak sú údaje príliš veľké, môžu presiahnuť maximálnu dĺžku adresy URL a spôsobiť chyby. Nakoniec, ak používate React Router DOM na navigáciu medzi stránkami v rámci aplikácie, musíte tiež manuálne spravovať stav a sledovať zmeny, aby ste zabezpečili, že všetky komponenty budú mať prístup k rovnakým údajom.

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

// Riadok 1: Tento riadok importuje háčik useHistory z knižnice respond-router-dom.
// Riadok 3: Tento riadok deklaruje konštantu s názvom MyComponent, čo je funkcia, ktorá vracia JSX.
// Riadok 4: Tento riadok deklaruje konštantu s názvom history, ktorá je priradená háku useHistory importovanému zo servera Reag-router-dom.
// Riadok 6: Tento riadok deklaruje funkciu s názvom handleClick, ktorá preberá jeden parameter, dáta.
// Riadok 7: Tento riadok používa objekt histórie na vloženie novej trasy do zásobníka s názvom cesty '/myroute' a údajmi o stave odovzdaných ako objekt.
// Riadky 9 – 11: Tieto riadky vracajú JSX obsahujúci prvok tlačidla s obslužným programom udalosti onClick, ktorý volá handleClick a odovzdáva údaje ako argument.

Reagovať Router Dom

React Router DOM je smerovacia knižnica pre React, ktorá umožňuje vývojárom vytvárať a spravovať trasy v rámci ich aplikácií React. Poskytuje základné komponenty potrebné na vytváranie zložitých, viacstránkových webových aplikácií s Reactom, vrátane komponentov ako Link, Route, Switch a BrowserRouter. Poskytuje tiež funkcie, ako je dynamické priraďovanie trasy a sledovanie polohy. S React Router DOM môžu vývojári jednoducho vytvárať jednostránkové aplikácie s viacerými zobrazeniami a trasami bez toho, aby museli manuálne spravovať URL alebo históriu prehliadača.

Ako odovzdávate údaje cez navigáciu v Reag-router-Dom

V React Router možno dáta prenášať cez navigáciu pomocou objektu stavu rozhrania API histórie. Stavový objekt je prístupný cez rekvizity ľubovoľného komponentu vykresleného pomocou a komponent. Ak chcete odovzdať údaje, môžete ich pridať do objektu stavu pri volaní funkcie navigovať. Napríklad:

const { history } = this.props;
history.push({
názov cesty: '/some/path',
state: { someData: 'data' }
});