Direngsekeun: meta router kaca hareup luhur

Masalah utama anu aya hubunganana sareng bagian luhur halaman React Router nyaéta yén éta tiasa nyababkeun kabiasaan anu teu kaduga nalika nganapigasi antara halaman. Nalika napigasi ka kaca anyar, browser bakal ngagulung deui ka luhur kaca, nu bisa jadi jarring pikeun pamaké nu expecting tetep dina kaca sarua atawa gulung ka handap salajengna. Sajaba ti, kabiasaan ieu bisa jadi teu diharepkeun ku pamaké nu geus biasa kana pola navigasi web leuwih tradisional.

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

// Jalur 1: garis ieu ngimpor hook useRouter ti perpustakaan meta-router-dom.
// Jalur 3: garis ieu ngadéklarasikeun fungsi disebut NextPage nu mulih komponén meta.
// garis 4: garis ieu ngadéklarasikeun variabel disebut router sarta nangtukeun ka hook useRouter.
// Jalur 6: garis ieu ngadéklarasikeun fungsi disebut handleClick nu nelepon metoda push router urang kalawan argumen '/ salajengna-kaca'.
// garis 8-11: garis ieu balik komponén meta kalawan unsur tombol nu boga onClick prop diatur pikeun handleClick. Nalika diklik, ieu bakal nyauran fungsi handleClick sareng arahkeun ka '/halaman salajengna'.

Napigasi antara kaca

React Router mangrupikeun perpustakaan routing anu kuat anu diwangun dina luhureun React anu ngabantosan anjeun nambihan layar énggal sareng ngalir ka aplikasi anjeun sacara luar biasa gancang, sadayana bari ngajaga URL singkronisasi sareng naon anu dipidangkeun dina halaman éta. React Router ngagampangkeun pikeun nganapigasi antara halaman dina aplikasi React nganggo pendekatan dumasar-komponénna. Kalayan bantosan komponén sapertos Link, NavLink, sareng Redirect, anjeun tiasa nyiptakeun tautan navigasi dinamis sareng interaktif anu ngamungkinkeun para pangguna ngalih kana aplikasi anjeun tanpa kedah ngetik URL sacara manual. Salaku tambahan, anjeun tiasa nganggo obyék sajarah anu disayogikeun ku React Router pikeun napigasi sacara program antara halaman dina aplikasi anjeun.

ScrollToTop atanapi Next page top

ScrollToTop mangrupikeun fitur dina React Router anu ngamungkinkeun para pangguna gancang ngagulung deui ka luhur halaman nalika nganapigasi antara rute anu béda. Ieu hususna kapaké pikeun halaman anu panjang sareng seueur eusi, sabab ngamungkinkeun para pangguna gancang luncat deui ka luhur tanpa kedah ngagulung sacara manual. Halaman luhur salajengna mangrupikeun fitur anu sami anu tiasa dianggo sami tapi sanés ngagulung deui ka luhur, éta bakal nyandak anjeun langsung ka halaman salajengna nalika nganapigasi antara rute. Ieu tiasa ngabantosan khususna pikeun pangguna anu milari inpormasi khusus dina halaman khusus sareng henteu hoyong ngagulung sadaya eusi dina halaman sanés sateuacan dugi ka dinya. Kadua fitur mangrupikeun tambihan anu saé anu ngabantosan ningkatkeun pangalaman pangguna sareng ngajantenkeun navigasi langkung gampang sareng gancang.