React Routeri järgmise lehe ülaosaga seotud peamine probleem on see, et see võib lehtede vahel navigeerimisel põhjustada ootamatut käitumist. Uuele lehele navigeerimisel kerib brauser tagasi lehe ülaossa, mis võib häirida kasutajaid, kes soovivad jääda samale lehele või veelgi allapoole kerida. Lisaks ei pruugi seda käitumist oodata kasutajad, kes on harjunud traditsioonilisemate veebinavigeerimismustritega.
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. rida: see rida impordib react-router-dom teegist konksu useRouter.
// Rida 3: see rida deklareerib funktsiooni NextPage, mis tagastab komponendi React.
// Rida 4: see rida deklareerib muutuja nimega ruuter ja määrab selle konksule useRouter.
// 6. rida: see rida deklareerib funktsiooni HandelClick, mis kutsub ruuteri tõukemeetodit argumendiga '/next-page'.
// Read 8-11: need read tagastavad Reacti komponendi koos nupuelemendiga, mille onClicki tugi on seatud väärtusele HandClick. Klõpsamisel kutsub see esile funktsiooni handleClick ja navigeerib lehele '/järgmine leht'.
Lehekülgede vahel navigeerimine
React Router on võimas Reacti peale ehitatud marsruutimisteek, mis aitab teil lisada rakendusele uskumatult kiiresti uusi ekraane ja vooge, hoides samal ajal URL-i sünkroonis lehel kuvatavaga. React Router hõlbustab Reacti rakenduse lehtede vahel navigeerimist, kasutades selle komponendipõhist lähenemisviisi. Selliste komponentide nagu Link, NavLink ja Redirect abil saate luua dünaamilisi ja interaktiivseid navigeerimislinke, mis võimaldavad kasutajatel teie rakenduses ringi liikuda, ilma et peaksid URL-e käsitsi sisestama. Lisaks saate oma rakenduses lehtede vahel programmiliseks navigeerimiseks kasutada React Routeri pakutavat ajalooobjekti.
ScrollToTop või Next page top
ScrollToTop on React Routeri funktsioon, mis võimaldab kasutajatel erinevate marsruutide vahel navigeerimisel kiiresti lehe ülaossa tagasi kerida. See on eriti kasulik pikkade ja rohke sisuga lehtede puhul, kuna see võimaldab kasutajatel kiiresti üles hüpata, ilma et peaksid käsitsi kerima. Järgmise lehe ülaosas on sarnane funktsioon, mis töötab sarnaselt, kuid tagasi üles kerimise asemel viib see teid marsruutide vahel navigeerimisel otse järgmisele lehele. See võib olla eriti kasulik kasutajatele, kes otsivad konkreetselt lehelt konkreetset teavet ega soovi, et enne sinna jõudmist tuleks teistel lehtedel kogu sisu läbi kerida. Mõlemad funktsioonid on suurepärased täiendused, mis aitavad parandada kasutajakogemust ning muudavad navigeerimise lihtsamaks ja kiiremaks.
