Riješeno: reagirajte usmjerivač vrh sljedeće stranice

Glavni problem povezan s vrhom sljedeće stranice React Routera jest to što može uzrokovati neočekivano ponašanje prilikom navigacije između stranica. Prilikom navigacije na novu stranicu, preglednik će se pomaknuti natrag na vrh stranice, što može biti uznemirujuće za korisnike koji očekuju da će ostati na istoj stranici ili se pomicati dalje prema dolje. Osim toga, ovo ponašanje možda ne očekuju korisnici koji su navikli na tradicionalnije obrasce web-navigacije.

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

// Red 1: Ovaj red uvozi useRouter hook iz biblioteke react-router-dom.
// Redak 3: Ovaj redak deklarira funkciju pod nazivom NextPage koja vraća React komponentu.
// Redak 4: Ovaj redak deklarira varijablu koja se zove router i dodjeljuje je useRouter kuki.
// Redak 6: Ovaj redak deklarira funkciju nazvanu handleClick koja poziva push metodu usmjerivača s argumentom '/next-page'.
// Redovi 8-11: Ovi redovi vraćaju React komponentu s elementom gumba koji ima onClick prop postavljen na handleClick. Kada se klikne, to će pozvati funkciju handleClick i otići na '/next-page'.

Krećite se između stranica

React Router moćna je biblioteka za usmjeravanje izgrađena na temelju Reacta koja vam pomaže dodati nove zaslone i tokove vašoj aplikaciji nevjerojatno brzo, a sve dok URL bude sinkroniziran s onim što se prikazuje na stranici. React Router olakšava navigaciju između stranica u React aplikaciji koristeći pristup temeljen na komponentama. Uz pomoć komponenti kao što su Link, NavLink i Redirect, možete stvoriti dinamične i interaktivne navigacijske veze koje korisnicima omogućuju kretanje po vašoj aplikaciji bez potrebe da ručno upisuju URL-ove. Dodatno, možete koristiti objekt povijesti koji nudi React Router za programsku navigaciju između stranica unutar vaše aplikacije.

ScrollToTop ili Vrh sljedeće stranice

ScrollToTop je značajka u React Routeru koja korisnicima omogućuje brzo pomicanje natrag na vrh stranice prilikom navigacije između različitih ruta. Posebno je koristan za duge stranice s puno sadržaja jer korisnicima omogućuje brzi skok natrag na vrh bez potrebe za ručnim listanjem. Sljedeća stranica na vrhu slična je značajka koja radi na sličan način, ali umjesto pomicanja unazad, vodi vas izravno na sljedeću stranicu prilikom navigacije između ruta. Ovo može biti posebno korisno za korisnike koji traže određene informacije na određenoj stranici i ne žele morati listati kroz sav sadržaj na drugim stranicama prije nego što stignu do njih. Obje značajke izvrsni su dodaci koji pomažu poboljšati korisničko iskustvo i čine navigaciju lakšom i bržom.