การคืนตำแหน่งการเลื่อนและเส้นทางไม่พบหน้า
คืนตำแหน่งการเลื่อนเมื่อย้อนกลับไปยังหน้าก่อนหน้า และแสดงหน้า 404 ที่เป็นมิตรสำหรับเส้นทางที่ไม่รู้จัก ทำให้ประสบการณ์ใช้งานบนมือถือราบรื่น
การคืนตำแหน่งการเลื่อนและเส้นทางไม่พบหน้า เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
เหตุใดต้องคืนตำแหน่งและรองรับ 404
เป้าหมาย: ทำให้การนำทางเป็นธรรมชาติ
- คืนตำแหน่งการเลื่อนเมื่อย้อนกลับ
- หน้า 404สำหรับเส้นทางที่ไม่รู้จัก
- การสาธิตอย่างง่ายที่ไม่ใช้ไลบรารี
แนวคิดโดยสรุป
- บันทึก scrollTop แยกตามเส้นทางก่อนออกจากเส้นทางนั้น
- เมื่อเมานต์ ให้อ่านค่าก่อนหน้าและเรียกใช้ scrollTo
- ตรวจจับเส้นทางที่ไม่ตรงกับเส้นทางใด และแสดงหน้าจอไม่พบเส้นทางที่ชัดเจน
สาธิต: โครงเราเตอร์ขนาดเล็ก
สถานะเราเตอร์ขนาดเล็กที่มีสามเส้นทาง และเราจะเพิ่มการคืนตำแหน่งการเลื่อนในขั้นถัดไป
<div id="root"></div>สาธิต: การคืนตำแหน่งการเลื่อน
บันทึก scrollTop แยกตามเส้นทาง และคืนค่าดังกล่าวเมื่อเมานต์ครั้งถัดไป เพื่อให้การย้อนกลับเป็นธรรมชาติ
<div id="root"></div>สาธิต: เส้นทางไม่พบหน้า
เพิ่มหน้าจอ NotFound สำหรับเส้นทางที่ไม่รู้จัก และเสนอปุ่มเพื่อไปยังหน้าหลัก
<div id="root"></div>เคล็ดลับและข้อควรระวัง
- จัดเก็บตำแหน่งการเลื่อนแยกตาม คีย์เส้นทาง
- คืนค่าตำแหน่งเมื่อเมานต์ ก่อนเริ่มงานที่ใช้ทรัพยากรมาก
- มีหน้าจอ NotFound เสมอ พร้อมวิธีกลับที่ชัดเจน
ตรวจสอบการคืนตำแหน่งการเลื่อน
สรุปทบทวน
สรุปทบทวน: แคช scrollTop แยกตามเส้นทางและคืนค่าเพื่อให้การนำทางย้อนกลับรู้สึกเป็นธรรมชาติ เพิ่มหน้า 404 ที่เป็นมิตรเพื่อแนะนำผู้ใช้กลับไปยังหน้าที่ปลอดภัย
คำถามที่พบบ่อย
บทเรียน “การคืนตำแหน่งการเลื่อนและเส้นทางไม่พบหน้า” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การคืนตำแหน่งการเลื่อนและเส้นทางไม่พบหน้า” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การคืนตำแหน่งการเลื่อนและเส้นทางไม่พบหน้า”
คืนตำแหน่งการเลื่อนเมื่อย้อนกลับไปยังหน้าก่อนหน้า และแสดงหน้า 404 ที่เป็นมิตรสำหรับเส้นทางที่ไม่รู้จัก ทำให้ประสบการณ์ใช้งานบนมือถือราบรื่น คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน
บทเรียน “การคืนตำแหน่งการเลื่อนและเส้นทางไม่พบหน้า” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เลย์เอาต์ซ้อนกัน ตัวโหลด (แนวคิด) และการดึงข้อมูลล่วงหน้า
- ลำดับการยืนยันตัวตนและเส้นทางที่มีการป้องกัน
- การคืนตำแหน่งการเลื่อนและเส้นทางไม่พบหน้า