Layout + Navbar

จากตัวอย่างด้านบน เราใช้ __root.tsx เป็น layout ที่ครอบทุกหน้า — มี <nav> และ <Outlet /> ที่จะแสดงหน้าย่อย ๆ

การทำงาน

// การทำงาน
<nav>...</nav>           // แสดงทุกหน้า
<main>
  <Outlet />             // เปลี่ยนไปตาม URL
</main>

หน้า /catalog จะแสดงที่ <Outlet />, หน้า /cart ก็เหมือนกัน — Navbar จะอยู่ตลอด

ประโยชน์ของ Layout

• ** reuse โค้ด** — เขียน nav ครั้งเดียว ใช้ได้ทุกหน้า
• ** แก้ไขง่าย** — อยากเปลี่ยน menu แก้ที่เดียว
• ** โครงสร้างชัดเจน** — เห็นว่าหน้าไหนมี nav หรือไม่