Solvita: reagi enkursigilon sekva paĝo supro

La ĉefa problemo rilata al la sekva paĝo de React Router estas, ke ĝi povas kaŭzi neatenditan konduton dum navigado inter paĝoj. Kiam vi navigas al nova paĝo, la retumilo rulu reen al la supro de la paĝo, kio povas esti ĝena por uzantoj, kiuj atendas resti sur la sama paĝo aŭ rulumi pli malsupren. Aldone, ĉi tiu konduto eble ne estas atendita de uzantoj, kiuj estas kutimaj al pli tradiciaj retnavigadaj ŝablonoj.

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

// Linio 1: Ĉi tiu linio importas la useRouter-hokon el la biblioteko react-router-dom.
// Linio 3: Ĉi tiu linio deklaras funkcion nomatan NextPage, kiu resendas React-komponenton.
// Linio 4: Ĉi tiu linio deklaras variablon nomatan enkursigilo kaj asignas ĝin al la hoko useRouter.
// Linio 6: Ĉi tiu linio deklaras funkcion nomitan handleClick kiu vokas la puŝmetodon de la enkursigilo kun argumento de '/next-page'.
// Linioj 8-11: Ĉi tiuj linioj resendas React-komponenton kun butonelemento, kiu havas onClick propon agordita por handleClick. Kiam oni klakas, ĉi tio vokos la funkcion handleClick kaj navigos al '/sekva paĝo'.

Navigu inter paĝoj

React Router estas potenca vojbiblioteko konstruita sur React, kiu helpas vin aldoni novajn ekranojn kaj fluojn al via aplikaĵo nekredeble rapide, ĉio konservante la URL sinkronigita kun tio, kio estas montrata sur la paĝo. React Router faciligas navigi inter paĝoj en React-aplikaĵo uzante sian komponent-bazitan aliron. Helpe de komponantoj kiel Link, NavLink kaj Redirect, vi povas krei dinamikajn kaj interagajn navigaciajn ligilojn, kiuj ebligas al uzantoj movi vian apon sen devi permane tajpi URL-ojn. Aldone, vi povas uzi la historian objekton provizitan de React Router por programe navigi inter paĝoj ene de via aplikaĵo.

ScrollTop aŭ Sekva paĝo supro

ScrollToTop estas trajto en React Router, kiu permesas al uzantoj rapide rulumi reen al la supro de la paĝo dum navigado inter malsamaj itineroj. Ĝi estas precipe utila por longaj paĝoj kun multe da enhavo, ĉar ĝi permesas al uzantoj rapide resalti al la supro sen devi mane rulumi. La supro de la sekva paĝo estas simila funkcio, kiu funkcias simile sed anstataŭ ruliĝi supren, ĝi kondukas vin rekte al la sekva paĝo kiam vi navigas inter itineroj. Ĉi tio povas esti speciale helpema por uzantoj, kiuj serĉas specifajn informojn en aparta paĝo kaj ne volas devi rulumi la tutan enhavon en aliaj paĝoj antaŭ ol atingi tien. Ambaŭ funkcioj estas bonegaj aldonoj, kiuj helpas plibonigi uzantan sperton kaj faciligi kaj pli rapidan navigadon.

Rilataj afiŝoj:

Lasu komenton