Pagrindinė problema, susijusi su „React Router“ kito puslapio viršumi, yra ta, kad jis gali sukelti netikėtą elgesį naršant tarp puslapių. Eidama į naują puslapį, naršyklė slinks atgal į puslapio viršų, o tai gali erzinti vartotojus, kurie tikisi likti tame pačiame puslapyje arba slinkti toliau žemyn. Be to, prie tradicinių žiniatinklio naršymo modelių pripratę vartotojai gali nesitikėti tokio elgesio.
import { useRouter } from 'react-router-dom';
const NextPage = () => {
const router = useRouter();
const handleClick = () => {
router.push('/next-page');
};
return (
<div>
<button onClick={handleClick}>Go to next page</button>
</div>
);
};
// 1 eilutė: ši eilutė importuoja „useRouter hook“ iš „react-router-dom“ bibliotekos.
// 3 eilutė: ši eilutė deklaruoja funkciją NextPage, kuri grąžina React komponentą.
// 4 eilutė: ši eilutė deklaruoja kintamąjį, vadinamą maršrutizatoriumi, ir priskiria jį „useRouter“ kabliui.
// 6 eilutė: ši eilutė deklaruoja funkciją, vadinamą handleClick, kuri iškviečia maršrutizatoriaus stūmimo metodą su argumentu „/next-page“.
// 8–11 eilutės: šios eilutės pateikia „React“ komponentą su mygtuko elementu, kuriame „onClick“ atrama nustatyta kaip „handleClick“. Spustelėjus bus iškviesta HandelClick funkcija ir pereinama į '/next-page'.
Naršyti tarp puslapių
„React Router“ yra galinga maršruto parinkimo biblioteka, sukurta „React“, kuri padeda neįtikėtinai greitai pridėti naujų ekranų ir srautų į programą, kartu išlaikant URL sinchronizavimą su tuo, kas rodoma puslapyje. „React Router“ leidžia lengvai naršyti tarp „React“ programos puslapių, naudojant komponentais pagrįstą metodą. Naudodami tokius komponentus kaip nuoroda, „NavLink“ ir peradresavimas, galite sukurti dinamines ir interaktyvias naršymo nuorodas, leidžiančias naudotojams judėti jūsų programoje, nereikia rankiniu būdu įvesti URL. Be to, galite naudoti „React Router“ pateiktą istorijos objektą, kad programiškai naršytumėte programos puslapius.
Slinkite į viršų arba į kitą puslapį į viršų
„ScrollToTop“ yra „React Router“ funkcija, leidžianti vartotojams greitai slinkti atgal į puslapio viršų naršant tarp skirtingų maršrutų. Jis ypač naudingas ilgiems puslapiams, kuriuose yra daug turinio, nes leidžia vartotojams greitai grįžti į viršų ir nereikia rankiniu būdu slinkti. Kito puslapio viršuje yra panaši funkcija, kuri veikia panašiai, bet užuot slinkusi atgal, nukreipia tiesiai į kitą puslapį naršant tarp maršrutų. Tai gali būti ypač naudinga naudotojams, kurie ieško konkrečios informacijos tam tikrame puslapyje ir nenori, kad prieš juos patekdami slinktų per visą kitų puslapių turinį. Abi funkcijos yra puikūs papildymai, kurie padeda pagerinti vartotojo patirtį ir palengvina bei pagreitina naršymą.
