Megoldva: pass data navigate react router dom

A React Router DOM-mal történő navigáció során az adatok átadásával kapcsolatos fő probléma az, hogy az adatokat az URL-lekérdezési karakterláncban kell átadni. Ez azt jelenti, hogy minden érzékeny információt kódolni kell az átadás előtt, mivel az látható lesz az URL-ben. Ezenkívül, ha az adatok túl nagyok, meghaladhatják az URL maximális hosszát, és hibákat okozhatnak. Végül, ha a React Router DOM-ot használja az alkalmazáson belüli oldalak közötti navigáláshoz, akkor manuálisan is kell kezelnie az állapotot, és nyomon kell követnie a változásokat, hogy minden összetevő hozzáférjen ugyanazokhoz az adatokhoz.

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. sor: Ez a sor importálja a useHistory hook-ot a react-router-dom könyvtárból.
// 3. sor: Ez a sor deklarál egy MyComponent nevű állandót, amely egy JSX-et visszaadó függvény.
// 4. sor: Ez a sor deklarál egy történelem nevű állandót, amely a react-router-domból importált useHistory hook-hoz van hozzárendelve.
// 6. sor: Ez a sor deklarálja a handleClick nevű függvényt, amely egyetlen paramétert, adatot vesz fel.
// 7. sor: Ez a sor az előzményobjektumot használja, hogy új útvonalat helyezzen a verembe '/myroute' elérési úttal és objektumként átadott állapotadatokkal.
// 9–11. sor: Ezek a sorok olyan JSX-et adnak vissza, amely egy gombelemet tartalmaz egy onClick eseménykezelővel, amely meghívja a handleClick parancsot, és argumentumként adatokat ad át.

React Router Dom

A React Router DOM a React útválasztási könyvtára, amely lehetővé teszi a fejlesztők számára, hogy útvonalakat hozzanak létre és kezeljenek a React alkalmazásaikon belül. Ez biztosítja az összetett, többoldalas webalkalmazások React segítségével történő létrehozásához szükséges alapvető összetevőket, beleértve az olyan összetevőket, mint a Link, Route, Switch és BrowserRouter. Olyan funkciókat is biztosít, mint a dinamikus útvonal-illesztés és a helykövetés. A React Router DOM segítségével a fejlesztők egyszerűen hozhatnak létre egyoldalas alkalmazásokat több nézettel és útvonallal anélkül, hogy manuálisan kellene kezelniük az URL-t vagy a böngésző előzményeit.

Hogyan továbbíthatja az adatokat a navigáción keresztül a react-router-Domban

A React Routerben az adatok navigáción keresztül továbbíthatók a történelem API állapotobjektumának használatával. Az állapotobjektum az a által megjelenített bármely komponens kellékein keresztül elérhető összetevő. Az adatok átadásához hozzáadhatja azokat az állapotobjektumhoz a navigációs funkció meghívásakor. Például:

const { előzmények } = this.props;
history.push({
elérési út: '/some/path',
állapot: { someData: 'data' }
});