U zgjidh: reagon ruteri në krye të faqes tjetër

Problemi kryesor që lidhet me pjesën e sipërme të faqes tjetër të React Router është se mund të shkaktojë sjellje të papritur kur lundroni midis faqeve. Kur lundroni në një faqe të re, shfletuesi do të lëvizë përsëri në krye të faqes, gjë që mund të shqetësojë përdoruesit që presin të qëndrojnë në të njëjtën faqe ose të lëvizin më poshtë. Për më tepër, kjo sjellje mund të mos pritet nga përdoruesit që janë mësuar me modele më tradicionale të navigimit në ueb.

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>  
  );  
};

// Rreshti 1: Kjo linjë importon grepin userRouter nga biblioteka react-router-dom.
// Rreshti 3: Kjo linjë deklaron një funksion të quajtur NextPage i cili kthen një komponent React.
// Rreshti 4: Kjo linjë deklaron një variabël të quajtur router dhe ia cakton atë grepit userRouter.
// Rreshti 6: Kjo linjë deklaron një funksion të quajtur handleClick i cili thërret metodën e shtytjes së ruterit me një argument '/next-page'.
// Linjat 8-11: Këto rreshta kthejnë një komponent React me një element butoni që ka një mbështetëse onClick të vendosur për të trajtuarClick. Kur klikohet, kjo do të thërrasë funksionin handleClick dhe do të lundrojë te '/faqja tjetër'.

Lundroni midis faqeve

React Router është një bibliotekë e fuqishme rrugëtimi e ndërtuar në krye të React që ju ndihmon të shtoni ekrane dhe flukse të reja në aplikacionin tuaj jashtëzakonisht shpejt, e gjitha kjo duke e mbajtur URL-në të sinkronizuar me atë që shfaqet në faqe. React Router e bën të lehtë lundrimin midis faqeve në një aplikacion React duke përdorur qasjen e tij të bazuar në komponentë. Me ndihmën e komponentëve të tillë si Link, NavLink dhe Redirect, ju mund të krijoni lidhje dinamike dhe ndërvepruese të navigimit që lejojnë përdoruesit të lëvizin nëpër aplikacionin tuaj pa pasur nevojë të shkruajnë manualisht URL. Për më tepër, mund të përdorni objektin e historisë të ofruar nga React Router për të naviguar në mënyrë programore midis faqeve brenda aplikacionit tuaj.

ScrollToTop ose në krye të faqes tjetër

ScrollToTop është një veçori në React Router që lejon përdoruesit të lëvizin shpejt përsëri në krye të faqes kur lundrojnë midis rrugëve të ndryshme. Është veçanërisht i dobishëm për faqet e gjata me shumë përmbajtje, pasi u lejon përdoruesve të kërcejnë shpejt lart në krye pa pasur nevojë të lëvizin manualisht. Pjesa e sipërme e faqes tjetër është një veçori e ngjashme që funksionon në mënyrë të ngjashme, por në vend që të lëvizni lart, ju çon drejtpërdrejt në faqen tjetër kur lundroni midis rrugëve. Kjo mund të jetë veçanërisht e dobishme për përdoruesit që kërkojnë informacion specifik në një faqe të caktuar dhe nuk duan të lëvizin nëpër të gjithë përmbajtjen në faqet e tjera përpara se të arrijnë atje. Të dyja veçoritë janë shtesa të shkëlqyera që ndihmojnë në përmirësimin e përvojës së përdoruesit dhe e bëjnë navigimin më të lehtë dhe më të shpejtë.