Ratkaistu: reagoi reititin seuraavan sivun alkuun

Suurin React Routerin seuraavan sivun yläosaan liittyvä ongelma on, että se voi aiheuttaa odottamatonta toimintaa sivujen välillä navigoitaessa. Kun navigoit uudelle sivulle, selain vierittää takaisin sivun yläosaan, mikä voi olla hämmentävää käyttäjille, jotka odottavat pysyvän samalla sivulla tai vierittävänsä alaspäin. Lisäksi perinteisempiin web-navigointimalleihin tottuneet käyttäjät eivät välttämättä odota tätä toimintaa.

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

// Rivi 1: Tämä rivi tuo useRouter-koukun react-router-dom-kirjastosta.
// Rivi 3: Tämä rivi ilmoittaa NextPage-nimisen funktion, joka palauttaa React-komponentin.
// Rivi 4: Tämä rivi ilmoittaa muuttujan nimeltä reititin ja määrittää sen useRouter-koukkuun.
// Rivi 6: Tämä rivi ilmoittaa handelClick-nimisen funktion, joka kutsuu reitittimen push-menetelmää argumentilla '/next-page'.
// Rivit 8-11: Nämä rivit palauttavat React-komponentin, jossa on painikeelementti, jossa onClick-propanteri on asetettu HandClick-arvoksi. Napsautettuna tämä kutsuu handleClick-funktion ja siirtyy kohtaan '/seuraava sivu'.

Navigoi sivujen välillä

React Router on tehokas Reactin päälle rakennettu reitityskirjasto, jonka avulla voit lisätä uusia näyttöjä ja virtauksia sovellukseesi uskomattoman nopeasti pitäen samalla URL-osoitteen synkronoituna sivulla näkyvän sisällön kanssa. React Router helpottaa React-sovelluksen sivujen välistä navigointia sen komponenttipohjaisen lähestymistavan avulla. Linkin, NavLinkin ja Redirectin kaltaisten komponenttien avulla voit luoda dynaamisia ja interaktiivisia navigointilinkkejä, joiden avulla käyttäjät voivat liikkua sovelluksessasi ilman, että sinun tarvitsee kirjoittaa URL-osoitteita manuaalisesti. Lisäksi voit käyttää React Routerin tarjoamaa historiaobjektia navigoidaksesi ohjelmallisesti sovelluksesi sivujen välillä.

ScrollToTor tai Next page alkuun

ScrollToTop on React Routerin ominaisuus, jonka avulla käyttäjät voivat selata nopeasti takaisin sivun yläosaan navigoidessaan eri reittien välillä. Se on erityisen hyödyllinen pitkillä sivuilla, joilla on paljon sisältöä, koska sen avulla käyttäjät voivat hypätä nopeasti takaisin ylös ilman manuaalista vieritystä. Seuraavan sivun alkuun on samanlainen ominaisuus, joka toimii samalla tavalla, mutta sen sijaan, että vierittäisi taaksepäin, se vie sinut suoraan seuraavalle sivulle navigoidessasi reittien välillä. Tämä voi olla erityisen hyödyllistä käyttäjille, jotka etsivät tiettyä tietoa tietystä sivusta eivätkä halua joutua selaamaan kaikkea muiden sivujen sisältöä ennen sinne pääsyä. Molemmat ominaisuudet ovat loistavia lisäyksiä, jotka parantavat käyttökokemusta ja tekevät navigoinnista helpompaa ja nopeampaa.