0Pricing
HTML Academy · บทเรียน

การกำหนดเส้นทางด้วยแฮชเทียบกับพาธ

เปรียบเทียบการกำหนดเส้นทางด้วยแฮชกับการกำหนดเส้นทางประวัติที่ใช้ pushState

การกำหนดเส้นทางด้วยแฮชเทียบกับพาธ เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

สองแนวทางสำหรับที่อยู่ของ SPA

SPA ต้องการที่อยู่ซึ่งเบราว์เซอร์จะไม่ดึงข้อมูล มีสองแนวทาง ได้แก่ การใช้แฮช ซึ่งใช้ส่วนต่อท้ายของที่อยู่ ทุกอย่างหลังเครื่องหมาย # และเบราว์เซอร์จะไม่ส่งส่วนนี้ไปยังเซิร์ฟเวอร์ กับ การใช้พาธ ซึ่งใช้พาธของที่อยู่ร่วมกับเทคนิคของ History API

การกำหนดเส้นทางด้วยแฮช

ที่อยู่จะมีรูปแบบ https://example.com/#/about เซิร์ฟเวอร์จะเห็นเพียง / และส่ง HTML เดียวกันสำหรับทุกที่อยู่ ส่วน JS ฝั่งไคลเอนต์จะอ่าน location.hash เพื่อเลือกมุมมองที่จะแสดงผล วิธีนี้เรียบง่ายและไม่ต้องตั้งค่าเซิร์ฟเวอร์

เหตุการณ์การเปลี่ยนแฮช

ตัวจัดการเส้นทางด้วยแฮชจะรับฟังเหตุการณ์ hashchange ซึ่งเกิดขึ้นทุกครั้งที่ location.hash เปลี่ยน เมื่อนำมารวมกับการอ่าน window.location.hash ก็จะได้ API ทั้งหมดที่จำเป็นสำหรับการกำหนดเส้นทางฝั่งไคลเอนต์ โดยไม่ต้องใช้ History API

window.addEventListener("hashchange", () => {
  const route = location.hash.slice(1) || "/";
  renderPage(route);
});

การกำหนดเส้นทางด้วยพาธ

ที่อยู่จะมีรูปแบบ https://example.com/about ซึ่งแยกไม่ออกจากที่อยู่ที่แสดงผลโดยเซิร์ฟเวอร์ pushState ของ History API เปลี่ยนพาธได้โดยไม่โหลดหน้าใหม่ เหตุการณ์การเปลี่ยนประวัติเกิดขึ้นเมื่อย้อนกลับหรือไปข้างหน้า และการดักจับการคลิกจะเปลี่ยน <a> ให้เป็นการนำทางแบบ SPA

ต้องตั้งค่าเซิร์ฟเวอร์

สำหรับการกำหนดเส้นทางด้วยพาธ เซิร์ฟเวอร์ต้องส่ง index.html ของ SPA เมื่อผู้ใช้อาจป้อนพาธนั้นโดยตรงหรือรีเฟรชหน้า มิฉะนั้นการรีเฟรช /about จะได้ข้อผิดพลาด 404 ให้กำหนดค่าโดยลองใช้ไฟล์ก่อน แล้วใช้ index.html เป็นทางเลือกสำรอง เช่น กลไกทางเลือกสำรองของประวัติในเอ็นจินเอ็กซ์ หรือปลั๊กอินประวัติ API ในวีตสำหรับโหมดพัฒนา

# Nginx config
location / {
  try_files $uri $uri/ /index.html;
}

เอสอีโอและการแชร์

ระบบค้นหาและเครื่องมือจำนวนมากไม่สามารถรวบรวมส่วนแฮชได้เลย — เนื้อหาที่ /#/about จะมองไม่เห็นสำหรับระบบรวบรวมข้อมูลรุ่นเก่า ระบบค้นหาของกูเกิลจัดการได้ด้วยการแสดงผลแบบไร้ส่วนติดต่อผู้ใช้ แต่ระบบอื่นอาจทำไม่ได้ ที่อยู่แบบพาธจะถูกรวบรวมข้อมูลตามปกติ จึงดีกว่าอย่างชัดเจนสำหรับเอสอีโอ

การรับรู้ของผู้ใช้

ที่อยู่แบบแฮชดู “แปลก” อย่างเห็นได้ชัด — ผู้ใช้สังเกตเห็นเครื่องหมาย # และอาจไม่เชื่อถือลิงก์หรือจำไม่ได้ว่าต้องคัดลอกที่อยู่ทั้งหมด ที่อยู่แบบพาธดูเหมือนที่อยู่เว็บทั่วไป ซึ่งตรงกับสิ่งที่ผู้ใช้คาดหวัง ด้วยเหตุนี้ SPA สมัยใหม่จึงมักเลือกการกำหนดเส้นทางด้วยพาธ

ความซับซ้อนในการนำไปใช้

แบบแฮชใช้โค้ด JS ประมาณ 10 บรรทัด ได้แก่ ตัวรับฟังเหตุการณ์เปลี่ยนแฮชและการแสดงผล ส่วนแบบพาธต้องเรียก pushState มีตัวรับฟังเหตุการณ์การเปลี่ยนประวัติ ดักจับการคลิกลิงก์ และตั้งค่าทางเลือกสำรองฝั่งเซิร์ฟเวอร์ แฮชเป็นตัวเลือกที่เบาที่สุด ส่วนพาธต้องใช้โครงสร้างพื้นฐานมากกว่าเพื่อประสบการณ์ผู้ใช้ที่ดีกว่า

ข้อควรพิจารณาสำหรับโฮสต์แบบสแตติก

โฮสต์แบบสแตติกล้วน เช่น การตั้งค่าเริ่มต้นของ GitHub Pages ไม่สามารถทำทางเลือกสำรองฝั่งเซิร์ฟเวอร์ได้ ดังนั้นการกำหนดเส้นทางด้วยพาธจะทำงานผิดพลาดเมื่อรีเฟรช วิธีแก้ ได้แก่ ใช้กลไกเปลี่ยนเส้นทางใน 404.html โฮสต์บนเน็ตลิฟายหรือเวอร์เซล ซึ่งรองรับทางเลือกสำรองสำหรับ SPA หรือยอมรับการใช้แฮชสำหรับโครงการที่ต้องโฮสต์แบบสแติกเท่านั้น

แนวทางแบบผสม

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

การย้ายระหว่างสองแนวทาง

หากต้องการย้ายจากแฮชไปเป็นพาธ ให้เขียนลิงก์ภายในทั้งหมดใหม่ เพิ่มทางเลือกสำรองของเซิร์ฟเวอร์ เปลี่ยนตรรกะการเปลี่ยนแฮชเป็นการจัดการเหตุการณ์การเปลี่ยนประวัติ และเปลี่ยนเส้นทางที่อยู่แบบแฮชเดิมไปยังที่อยู่แบบพาธที่สอดคล้องกันด้วยสคริปต์เริ่มต้นขนาดเล็ก ซึ่งทำงานครั้งเดียวและเรียก history.replaceState

เกณฑ์ในการตัดสินใจ

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

ตรวจสอบความเข้าใจ

เหตุใดการกำหนดเส้นทาง SPA ด้วยพาธจึงต้องตั้งค่าเซิร์ฟเวอร์ แต่การกำหนดเส้นทางด้วยแฮชไม่ต้องตั้งค่า

สรุป

การกำหนดเส้นทางด้วยแฮช เช่น ที่อยู่รูปแบบ /#/about ไม่ต้องตั้งค่าเซิร์ฟเวอร์ แต่มีเอสอีโอที่อ่อนกว่าและใช้ที่อยู่ที่ดูไม่สวยงาม ส่วนการกำหนดเส้นทางด้วยพาธ เช่น ที่อยู่รูปแบบ /about ต้องมีทางเลือกสำรองของเซิร์ฟเวอร์ไปยัง index.html แต่ได้ที่อยู่ที่สะอาด เหมาะกับเอสอีโอ และแชร์ได้ง่าย SPA สมัยใหม่ที่เปิดให้ผู้ใช้ทั่วไปเข้าถึงจะใช้แบบพาธ ส่วนโครงการที่โฮสต์แบบสแติกหรือโครงการภายในอาจยังเลือกแบบแฮชเพื่อความเรียบง่าย

คำถามที่พบบ่อย

บทเรียน “การกำหนดเส้นทางด้วยแฮชเทียบกับพาธ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การกำหนดเส้นทางด้วยแฮชเทียบกับพาธ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดเส้นทางด้วยแฮชเทียบกับพาธ”

เปรียบเทียบการกำหนดเส้นทางด้วยแฮชกับการกำหนดเส้นทางประวัติที่ใช้ pushState คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การกำหนดเส้นทางด้วยแฮชเทียบกับพาธ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. pushState และ replaceState
  2. เหตุการณ์ popstate
  3. การกำหนดเส้นทางด้วยแฮชเทียบกับพาธ
  4. Navigation API ในเบราว์เซอร์สมัยใหม่
← กลับไปที่ HTML Academy