Megoldva: adatok átadása a react router előzményeiben%2Cpush

Az adatok átadásával kapcsolatos fő probléma a react router push-ban az, hogy az adatok nem maradnak meg az oldalfrissítések során. Amikor a felhasználó frissíti az oldalt, a history.push fájlban tárolt adatok elvesznek, és nem lesznek használhatók a következő oldalbetöltéseknél. Ez váratlan viselkedéshez vezethet, és problémákat okozhat, amikor egy korábbi oldalbetöltésből származó adatokat próbál elérni vagy tárolni.

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: "/mypage", state: data });
  };

  return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};

1. Ez a sor importálja a useHistory hook-ot a react-router-dom könyvtárból, amely hozzáférést biztosít az előzményobjektumhoz, amely nyomon követi az alkalmazás aktuális helyét.

2. Ez a sor deklarál egy MyComponent nevű funkcionális komponenst, és hozzárendeli egy állandó változóhoz.

3. Ez a sor az 1. sorban importált useHistory hook segítségével éri el az előzményobjektumot, és rendeli hozzá a történelem nevű állandó változóhoz.

4. Ez a sor deklarálja a handleClick nevű függvényt, amely egy data nevű argumentumot vesz fel, és a history.push() segítségével az elérési út és állapot tulajdonságait tartalmazó objektumot az előzményverembe helyezi.

5. Ez a sor egy gombelemet ad vissza egy onClick eseménykezelővel, amely meghívja a handleClick() függvényt, és valamilyen adatot tartalmaz argumentumként, amikor a felhasználó rákattint.

Történelem push

Az előzmények leküldése a React Routerben egy olyan módszer, amellyel programozottan módosíthatja az URL-t a böngészőben anélkül, hogy oldalfrissítést okozna. Lehetővé teszi a fejlesztők számára, hogy egyoldalas alkalmazásokat hozzanak létre, amelyek továbbra is képesek kezelni a navigációt és a mélyhivatkozásokat. A History push a böngésző előzmények API-ját használja, amely lehetővé teszi a fejlesztők számára, hogy az oldal újratöltése nélkül módosítsák az aktuális URL-t. Ez lehetővé teszi a felhasználók számára, hogy az alkalmazás különböző oldalai között navigáljanak anélkül, hogy minden alkalommal újra be kellene tölteniük. Ezenkívül mélyhivatkozásra is használható, lehetővé téve a felhasználók számára, hogy közvetlenül az alkalmazás meghatározott részeihez kapcsolódjanak.

Hogyan használhatom az előzményeket a react routerben

A React Router lehetőséget biztosít az előzmények használatára a React alkalmazásaiban. Az előzmények segítségével nyomon követheti az aktuális oldalt, valamint a korábban meglátogatott oldalakat. Ez hasznos a navigáció létrehozásához és a felhasználói műveletek nyomon követéséhez.

Az előzmények használatához a React Routerben létre kell hoznia egy előzményobjektumot a createHistory() metódussal az előzménycsomagból. Ez hozzáférést biztosít az olyan metódusokhoz, mint a push(), a csere() és a go(). Ezekkel a módszerekkel manipulálhatja a böngésző URL-jét, és navigálhat az alkalmazás különböző útvonalai között. A listen() metódussal figyelheti az URL-ben bekövetkezett változásokat, és ennek megfelelően frissítheti az alkalmazást.

Miután létrehozott egy előzményobjektumot, létrehozásakor átadhatja azt az útválasztó összetevőjének. Ez lehetővé teszi a React Router számára, hogy nyomon kövesse a felhasználók által végrehajtott összes változtatást, és ennek megfelelően frissítse.

Az előzmények használata a React Routerrel megkönnyíti a fejlesztők számára, hogy hatékony navigációs összetevőket hozzanak létre, amelyeket a felhasználók könnyen megértenek és kezelhetnek velük.

Kapcsolódó hozzászólások:

Írj hozzászólást