Pagrindinė problema, susijusi su duomenų perdavimu reaguojant į maršrutizatoriaus istoriją, yra ta, kad duomenys neišsaugomi atnaujinant puslapį. Kai vartotojas atnaujins puslapį, duomenys, saugomi history.push, bus prarasti ir jų nebus galima naudoti vėliau įkeliant puslapį. Tai gali sukelti netikėtą elgesį ir gali kilti problemų bandant pasiekti arba saugoti duomenis iš ankstesnio puslapio įkėlimo.
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. Ši eilutė importuoja „useHistory Hook“ iš „react-router-dom“ bibliotekos, kuri suteikia prieigą prie istorijos objekto, kuris seka dabartinę vietą programoje.
2. Ši eilutė deklaruoja funkcinį komponentą, vadinamą MyComponent, ir priskiria jį pastoviam kintamajam.
3. Šioje eilutėje naudojamas 1 eilutėje importuotas kabliukas useHistory, kad gautų prieigą prie istorijos objekto ir priskirtų jį pastoviam kintamajam, vadinamam istorija.
4. Šioje eilutėje deklaruojama funkcija, vadinama handleClick, kuri paima argumentą, vadinamą data, ir perkelia objektą, kuriame yra kelio pavadinimas ir būsenos ypatybės, į istorijos krūvą naudojant history.push().
5. Šioje eilutėje pateikiamas mygtuko elementas su onClick įvykių tvarkykle, kuri iškviečia handelClick() su objektu, kurio argumentas yra someData, kai jį spusteli vartotojas.
Istorijos postūmis
„React Router“ istorijos siuntimas yra metodas, naudojamas programiškai pakeisti URL naršyklėje neatnaujinant puslapio. Tai leidžia kūrėjams kurti vieno puslapio programas, kurios vis dar gali valdyti naršymą ir giliąsias nuorodas. Istorijos siuntimas veikia naudojant naršyklės istorijos API, kuri leidžia kūrėjams manipuliuoti dabartiniu URL neįkeliant puslapio iš naujo. Tai leidžia vartotojams naršyti tarp skirtingų programos puslapių ir nereikia kiekvieną kartą įkelti iš naujo. Be to, jis gali būti naudojamas giliajam susiejimui, leidžiant vartotojams tiesiogiai susieti tam tikras programos dalis.
Kaip naudoti istoriją react maršrutizatoriuje
„React Router“ suteikia galimybę naudoti istoriją „React“ programose. Istorija leidžia sekti dabartinį puslapį, taip pat visus ankstesnius aplankytus puslapius. Tai naudinga kuriant naršymą ir stebint vartotojo veiksmus.
Norėdami naudoti istoriją „React Router“, turite sukurti istorijos objektą naudodami „createHistory()“ metodą iš istorijos paketo. Tai suteiks prieigą prie metodų, tokių kaip push (), pakeisti () ir go (). Šie metodai leidžia manipuliuoti naršyklės URL ir naršyti tarp skirtingų programos maršrutų. Taip pat galite naudoti klausymo () metodą, kad įsiklausytumėte į URL pakeitimus ir atitinkamai atnaujintumėte programą.
Sukūrę istorijos objektą, kurdami galite perkelti jį į maršrutizatoriaus komponentą. Tai leis „React Router“ stebėti visus vartotojų atliktus pakeitimus ir atitinkamai atnaujinti.
Naudodami istoriją su React Router kūrėjams lengviau kurti galingus naršymo komponentus, kuriuos vartotojams lengva suprasti ir su jais sąveikauti.
