Rešeno: reagirajte usmerjevalnik naslednja stran vrh

Glavna težava, povezana z vrhom naslednje strani React Routerja, je, da lahko povzroči nepričakovano vedenje pri krmarjenju med stranmi. Ko se pomaknete na novo stran, se bo brskalnik pomaknil nazaj na vrh strani, kar je lahko moteče za uporabnike, ki pričakujejo, da bodo ostali na isti strani ali se pomaknili dlje navzdol. Poleg tega tega vedenja morda ne pričakujejo uporabniki, ki so navajeni bolj tradicionalnih vzorcev spletne 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>  
  );  
};

// Vrstica 1: Ta vrstica uvozi kljuko useRouter iz knjižnice react-router-dom.
// Vrstica 3: Ta vrstica deklarira funkcijo, imenovano NextPage, ki vrne komponento React.
// Vrstica 4: Ta vrstica deklarira spremenljivko, imenovano router, in jo dodeli kljuki useRouter.
// Vrstica 6: Ta vrstica deklarira funkcijo, imenovano handleClick, ki pokliče potisno metodo usmerjevalnika z argumentom '/next-page'.
// Vrstice 8–11: Te vrstice vrnejo komponento React z elementom gumba, ki ima podlago onClick, nastavljeno na handleClick. Ko kliknete, bo to poklicalo funkcijo handleClick in se pomaknilo na '/next-page'.

Pomikanje med stranmi

React Router je zmogljiva usmerjevalna knjižnica, zgrajena na vrhu Reacta, ki vam pomaga neverjetno hitro dodajati nove zaslone in pretoke v vašo aplikacijo, pri tem pa ohranja URL sinhroniziran s tem, kar je prikazano na strani. React Router omogoča preprosto krmarjenje med stranmi v aplikaciji React s svojim pristopom, ki temelji na komponentah. S pomočjo komponent, kot so Link, NavLink in Redirect, lahko ustvarite dinamične in interaktivne navigacijske povezave, ki uporabnikom omogočajo premikanje po vaši aplikaciji, ne da bi morali ročno vnašati URL-je. Poleg tega lahko uporabite predmet zgodovine, ki ga nudi React Router, za programsko krmarjenje med stranmi v vaši aplikaciji.

ScrollToTop ali vrh naslednje strani

ScrollToTop je funkcija v React Routerju, ki uporabnikom omogoča hitro pomikanje nazaj na vrh strani pri navigaciji med različnimi potmi. Še posebej je uporaben za dolge strani z veliko vsebine, saj uporabnikom omogoča hiter skok nazaj na vrh, ne da bi se morali ročno pomikati. Naslednja stran na vrhu je podobna funkcija, ki deluje podobno, vendar vas namesto pomikanja nazaj navzgor popelje neposredno na naslednjo stran pri navigaciji med potmi. To je lahko še posebej koristno za uporabnike, ki iščejo določene informacije na določeni strani in se ne želijo pomikati po vsej vsebini na drugih straneh, preden pridejo do nje. Obe funkciji sta odlična dodatka, ki pomagata izboljšati uporabniško izkušnjo ter naredita navigacijo lažjo in hitrejšo.