แก้ไขแล้ว: ตอบสนองเราเตอร์หน้าถัดไปด้านบน

ปัญหาหลักเกี่ยวกับหน้าแรกถัดไปของ React Router คืออาจทำให้เกิดพฤติกรรมที่ไม่คาดคิดเมื่อนำทางระหว่างหน้าต่างๆ เมื่อไปที่หน้าใหม่ เบราว์เซอร์จะเลื่อนกลับไปที่ด้านบนสุดของหน้า ซึ่งอาจสร้างความสับสนให้กับผู้ใช้ที่คาดว่าจะอยู่ในหน้าเดิมหรือเลื่อนลงไปอีก นอกจากนี้ ผู้ใช้ที่คุ้นเคยกับรูปแบบการนำทางเว็บแบบดั้งเดิมอาจไม่คาดหวังพฤติกรรมนี้

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

// บรรทัดที่ 1: บรรทัดนี้นำเข้า useRouter hook จากไลบรารี react-router-dom
// บรรทัดที่ 3: บรรทัดนี้ประกาศฟังก์ชันชื่อ NextPage ซึ่งจะส่งคืนส่วนประกอบ React
// บรรทัดที่ 4: บรรทัดนี้ประกาศตัวแปรที่เรียกว่าเราเตอร์ และกำหนดให้กับ hook ของ useRouter
// บรรทัดที่ 6: บรรทัดนี้ประกาศฟังก์ชันชื่อ handleClick ซึ่งเรียกเมธอด push ของเราเตอร์ด้วยอาร์กิวเมนต์ '/next-page'
// บรรทัดที่ 8-11: บรรทัดเหล่านี้ส่งคืนส่วนประกอบ React ด้วยองค์ประกอบปุ่มที่มีการตั้งค่า onClick prop เป็น handleClick เมื่อคลิกแล้ว จะเรียกใช้ฟังก์ชัน handleClick และไปที่ '/next-page'

นำทางระหว่างหน้า

React Router เป็นไลบรารีการกำหนดเส้นทางที่มีประสิทธิภาพซึ่งสร้างขึ้นจาก React ที่ช่วยให้คุณเพิ่มหน้าจอใหม่และโฟลว์ไปยังแอปพลิเคชันของคุณได้อย่างรวดเร็วอย่างไม่น่าเชื่อ ทั้งหมดนี้ทำให้ URL ซิงค์กับสิ่งที่แสดงบนหน้า React Router ทำให้การนำทางระหว่างหน้าต่างๆ ในแอปพลิเคชัน React เป็นเรื่องง่ายโดยใช้วิธีการตามส่วนประกอบ ด้วยความช่วยเหลือของคอมโพเนนต์ต่างๆ เช่น ลิงก์ NavLink และการเปลี่ยนเส้นทาง คุณสามารถสร้างลิงก์การนำทางแบบไดนามิกและเชิงโต้ตอบที่อนุญาตให้ผู้ใช้ย้ายไปรอบๆ แอปของคุณโดยไม่ต้องพิมพ์ URL ด้วยตนเอง นอกจากนี้ คุณสามารถใช้ออบเจกต์ประวัติที่ React Router จัดหาให้เพื่อนำทางระหว่างหน้าต่างๆ ภายในแอปพลิเคชันของคุณโดยทางโปรแกรม

ScrollToTop หรือหน้าถัดไปบนสุด

ScrollToTop เป็นคุณสมบัติใน React Router ที่ช่วยให้ผู้ใช้สามารถเลื่อนกลับไปที่ด้านบนของหน้าได้อย่างรวดเร็วเมื่อนำทางระหว่างเส้นทางต่างๆ มีประโยชน์อย่างยิ่งสำหรับหน้าเว็บขนาดยาวที่มีเนื้อหาจำนวนมาก เนื่องจากช่วยให้ผู้ใช้สามารถย้อนกลับขึ้นไปด้านบนได้อย่างรวดเร็วโดยไม่ต้องเลื่อนด้วยตนเอง ด้านบนของหน้าถัดไปเป็นคุณสมบัติที่คล้ายกันซึ่งทำงานคล้ายกัน แต่แทนที่จะเลื่อนกลับขึ้นไป มันจะพาคุณไปยังหน้าถัดไปโดยตรงเมื่อนำทางระหว่างเส้นทาง สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับผู้ใช้ที่กำลังมองหาข้อมูลเฉพาะในหน้าใดหน้าหนึ่ง และไม่ต้องการเลื่อนดูเนื้อหาทั้งหมดในหน้าอื่นก่อนที่จะไปถึงที่นั่น คุณลักษณะทั้งสองเป็นส่วนเสริมที่ยอดเยี่ยมซึ่งช่วยปรับปรุงประสบการณ์ของผู้ใช้และทำให้การนำทางง่ายและรวดเร็วขึ้น