Hlavným problémom súvisiacim s odovzdávaním údajov v histórii reakčného smerovača je to, že údaje sa neuchovávajú počas obnovovania stránky. Keď používateľ obnoví stránku, údaje uložené v history.push sa stratia a nebudú k dispozícii na použitie pri ďalších načítaniach stránky. To môže viesť k neočakávanému správaniu a môže spôsobiť problémy pri pokuse o prístup alebo uloženie údajov z predchádzajúceho načítania stránky.
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. Tento riadok importuje háčik useHistory z knižnice respond-router-dom, ktorá poskytuje prístup k objektu histórie, ktorý sleduje aktuálnu polohu v aplikácii.
2. Tento riadok deklaruje funkčný komponent s názvom MyComponent a priraďuje ho ku konštantnej premennej.
3. Tento riadok používa hák useHistory importovaný v riadku 1 na získanie prístupu k objektu histórie a jeho priradenie ku konštantnej premennej nazývanej história.
4. Tento riadok deklaruje funkciu nazvanú handleClick, ktorá prevezme argument s názvom data a vloží objekt obsahujúci cestu a vlastnosti stavu do zásobníka histórie pomocou history.push().
5. Tento riadok vracia prvok tlačidla s obsluhou udalosti onClick, ktorá volá handleClick() s objektom obsahujúcim someData ako argument, keď naň používateľ klikne.
História tlače
História push v React Router je metóda používaná na programovú zmenu adresy URL v prehliadači bez toho, aby došlo k obnoveniu stránky. Umožňuje vývojárom vytvárať jednostránkové aplikácie, ktoré sú stále schopné zvládnuť navigáciu a priame prepojenie. História push funguje pomocou rozhrania API histórie prehliadača, ktoré umožňuje vývojárom manipulovať s aktuálnou adresou URL bez opätovného načítania stránky. To umožňuje používateľom prechádzať medzi rôznymi stránkami aplikácie bez toho, aby sa museli zakaždým znova načítať. Okrem toho sa dá použiť na priame prepojenie, čo používateľom umožňuje priamo sa prepojiť s konkrétnymi časťami aplikácie.
Ako môžem použiť históriu v routeri Reag
React Router poskytuje spôsob, ako používať históriu vo vašich aplikáciách React. História vám umožňuje sledovať aktuálnu stránku, ako aj všetky predchádzajúce navštívené stránky. Je to užitočné pri vytváraní navigácie a sledovaní akcií používateľa.
Ak chcete použiť históriu v React Router, musíte vytvoriť objekt histórie pomocou metódy createHistory() z balíka histórie. Umožní vám to prístup k metódam ako push(), replace() a go(). Tieto metódy vám umožňujú manipulovať s adresou URL prehliadača a navigovať medzi rôznymi trasami vo vašej aplikácii. Môžete tiež použiť metódu listen() na vypočutie zmien v adrese URL a príslušnú aktualizáciu vašej aplikácie.
Po vytvorení objektu histórie ho môžete pri vytváraní odovzdať do komponentu smerovača. To umožní React Router sledovať všetky zmeny vykonané používateľmi a podľa toho aktualizovať.
Používanie histórie s React Router uľahčuje vývojárom vytváranie výkonných navigačných komponentov, ktoré sú pre používateľov jednoduché na pochopenie a interakciu s nimi.
