Selesai: penghala tindak balas sebelah atas halaman

Masalah utama yang berkaitan dengan bahagian atas halaman React Router seterusnya ialah ia boleh menyebabkan tingkah laku yang tidak dijangka apabila menavigasi antara halaman. Apabila menavigasi ke halaman baharu, penyemak imbas akan menatal kembali ke bahagian atas halaman, yang boleh membingungkan pengguna yang menjangkakan untuk kekal di halaman yang sama atau tatal ke bawah lebih jauh. Selain itu, tingkah laku ini mungkin tidak dijangka oleh pengguna yang biasa dengan corak navigasi web yang lebih 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>  
  );  
};

// Baris 1: Baris ini mengimport cangkuk useRouter daripada perpustakaan react-router-dom.
// Baris 3: Baris ini mengisytiharkan fungsi yang dipanggil NextPage yang mengembalikan komponen React.
// Baris 4: Baris ini mengisytiharkan pembolehubah yang dipanggil penghala dan memberikannya kepada cangkuk useRouter.
// Baris 6: Baris ini mengisytiharkan fungsi yang dipanggil handleClick yang memanggil kaedah tolak penghala dengan hujah '/next-page'.
// Baris 8-11: Baris ini mengembalikan komponen React dengan elemen butang yang mempunyai prop onClick yang ditetapkan untuk handleClick. Apabila diklik, ini akan memanggil fungsi handleClick dan navigasi ke '/next-page'.

Navigasi antara halaman

React Router ialah pustaka penghalaan yang berkuasa yang dibina di atas React yang membantu anda menambah skrin baharu dan mengalir ke aplikasi anda dengan sangat pantas, sambil memastikan URL selari dengan perkara yang dipaparkan pada halaman. Penghala React memudahkan untuk menavigasi antara halaman dalam aplikasi React menggunakan pendekatan berasaskan komponennya. Dengan bantuan komponen seperti Pautan, NavLink dan Ubah hala, anda boleh membuat pautan navigasi dinamik dan interaktif yang membolehkan pengguna bergerak di sekitar apl anda tanpa perlu menaip URL secara manual. Selain itu, anda boleh menggunakan objek sejarah yang disediakan oleh React Router untuk menavigasi secara pemrograman antara halaman dalam aplikasi anda.

Tatal Ke Atas atau Halaman Seterusnya atas

ScrollToTop ialah ciri dalam React Router yang membolehkan pengguna menatal kembali dengan cepat ke bahagian atas halaman apabila menavigasi antara laluan yang berbeza. Ia amat berguna untuk halaman panjang dengan banyak kandungan, kerana ia membolehkan pengguna melompat semula ke atas dengan cepat tanpa perlu menatal secara manual. Bahagian atas halaman seterusnya ialah ciri serupa yang berfungsi sama tetapi bukannya menatal semula ke atas, ia membawa anda terus ke halaman seterusnya apabila menavigasi antara laluan. Ini boleh membantu terutamanya untuk pengguna yang mencari maklumat khusus pada halaman tertentu dan tidak mahu perlu menatal semua kandungan pada halaman lain sebelum sampai ke sana. Kedua-dua ciri adalah tambahan hebat yang membantu meningkatkan pengalaman pengguna dan menjadikan navigasi lebih mudah dan pantas.