Galvenā problēma, kas saistīta ar React Router nākamās lapas augšdaļu, ir tā, ka tas var izraisīt neparedzētu darbību, pārvietojoties starp lapām. Pārejot uz jaunu lapu, pārlūkprogramma ritinās atpakaļ uz lapas augšdaļu, kas var būt mulsinoši lietotājiem, kuri plāno palikt tajā pašā lapā vai ritināt tālāk uz leju. Turklāt lietotāji, kuri ir pieraduši pie tradicionālākiem tīmekļa navigācijas modeļiem, nevar sagaidīt šo darbību.
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. rinda: šī rinda importē useRouter āķi no react-router-dom bibliotēkas.
// 3. rinda: šī rinda deklarē funkciju NextPage, kas atgriež React komponentu.
// 4. rinda: šī rinda deklarē mainīgo, ko sauc par maršrutētāju, un piešķir to useRouter āķim.
// 6. rindiņa: šī rinda deklarē funkciju, ko sauc par handleClick, kas izsauc maršrutētāja push metodi ar argumentu “/next-page”.
// 8.–11. rinda: šīs rindas atgriež React komponentu ar pogas elementu, kuram irClick atbalsts ir iestatīts uz HandClick. Noklikšķinot, tiks izsaukta funkcija handleClick un tiks pārvietota uz '/next-page'.
Pārvietojieties starp lapām
React Router ir jaudīga maršrutēšanas bibliotēka, kas izveidota uz React, kas palīdz neticami ātri pievienot lietojumprogrammai jaunus ekrānus un plūsmas, vienlaikus saglabājot URL sinhronizāciju ar lapā redzamo. React Router ļauj ērti pārvietoties starp lapām React lietojumprogrammā, izmantojot tās komponentu pieeju. Izmantojot tādus komponentus kā Link, NavLink un Redirect, varat izveidot dinamiskas un interaktīvas navigācijas saites, kas ļauj lietotājiem pārvietoties pa jūsu lietotni, manuāli neievadot vietrāžus URL. Turklāt varat izmantot React Router nodrošināto vēstures objektu, lai programmatiski pārvietotos starp lietojumprogrammas lapām.
ScrollToTop vai Next page top
ScrollToTop ir React Router funkcija, kas ļauj lietotājiem ātri ritināt atpakaļ uz lapas sākumu, pārvietojoties starp dažādiem maršrutiem. Tas ir īpaši noderīgi garām lapām ar daudz satura, jo tas ļauj lietotājiem ātri pāriet atpakaļ uz augšu, neveicot manuālu ritināšanu. Nākamās lapas augšdaļa ir līdzīga funkcija, kas darbojas līdzīgi, taču tā vietā, lai ritinātu atpakaļ uz augšu, tiek novirzīts tieši uz nākamo lapu, pārvietojoties starp maršrutiem. Tas var būt īpaši noderīgi lietotājiem, kuri meklē konkrētu informāciju noteiktā lapā un nevēlas, lai pirms tur nonākšanas būtu jāritina viss saturs citās lapās. Abas funkcijas ir lieliski papildinājumi, kas palīdz uzlabot lietotāja pieredzi un padara navigāciju vieglāku un ātrāku.
