El principal problema relacionat amb la part superior de la pàgina següent de React Router és que pot provocar un comportament inesperat en navegar entre pàgines. Quan navegueu a una pàgina nova, el navegador es desplaçarà cap a la part superior de la pàgina, cosa que pot ser molest per als usuaris que esperen quedar-se a la mateixa pàgina o desplaçar-se més cap avall. A més, és possible que aquest comportament no sigui esperat pels usuaris que estan acostumats a patrons de navegació web més tradicionals.
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>
);
};
// Línia 1: aquesta línia importa el ganxo useRouter de la biblioteca react-router-dom.
// Línia 3: aquesta línia declara una funció anomenada NextPage que retorna un component React.
// Línia 4: aquesta línia declara una variable anomenada router i l'assigna al ganxo useRouter.
// Línia 6: aquesta línia declara una funció anomenada handleClick que crida al mètode push de l'encaminador amb un argument de '/next-page'.
// Línies 8-11: aquestes línies retornen un component React amb un element botó que té un punt onClick configurat per handleClick. Quan feu clic, cridarà la funció handleClick i navegarà a '/next-page'.
Navega entre les pàgines
React Router és una potent biblioteca d'encaminament construïda a la part superior de React que us ajuda a afegir noves pantalles i fluxos a la vostra aplicació amb una rapidesa increïble, tot mantenint l'URL sincronitzat amb el que es mostra a la pàgina. React Router facilita la navegació entre les pàgines d'una aplicació React mitjançant el seu enfocament basat en components. Amb l'ajuda de components com Link, NavLink i Redirect, podeu crear enllaços de navegació dinàmics i interactius que permetin als usuaris moure's per la vostra aplicació sense haver d'escriure manualment els URL. A més, podeu utilitzar l'objecte d'historial proporcionat per React Router per navegar programadament entre les pàgines de la vostra aplicació.
ScrollTop o Pàgina següent superior
ScrollToTop és una característica de React Router que permet als usuaris tornar ràpidament a la part superior de la pàgina quan naveguen entre diferents rutes. És especialment útil per a pàgines llargues amb molt de contingut, ja que permet als usuaris tornar ràpidament a la part superior sense haver de desplaçar-se manualment. La part superior de la pàgina següent és una característica similar que funciona de manera similar, però en lloc de desplaçar-vos cap amunt, us porta directament a la pàgina següent quan navegueu entre rutes. Això pot ser especialment útil per als usuaris que busquen informació específica en una pàgina concreta i no volen haver de desplaçar-se per tot el contingut d'altres pàgines abans d'arribar-hi. Ambdues funcions són grans addicions que ajuden a millorar l'experiència de l'usuari i fan que la navegació sigui més fàcil i ràpida.
