Expo Router กับการออกแบบ Navigation ที่ถนัดมือ

Expo Router เปลี่ยน mental model การ navigation บน React Native ไปจากเดิมโดยสิ้นเชิง — เปลี่ยนจากการ define route ด้วย code มาเป็นการวางไฟล์ตามโครงสร้าง folder แนวคิดเดียวกับ Next.js App Router ทำให้ scale ได้ง่ายและ deep link ทำงานได้ out-of-the-box

ทำไมต้อง file-based routing

ในแอปขนาดใหญ่ การ define route ด้วย code จะเริ่มซับซ้อนเมื่อมี screen หลายสิบตัว File-based routing แก้ปัญหานี้โดยใช้โครงสร้างไฟล์เป็น source of truth — เปิด folder แล้วเห็นทันทีว่าแอปมีหน้าไหนบ้าง

Convention over configuration

Expo Router กำหนด convention ชัด เช่น (tabs) = group ที่มี tab bar, [id] = dynamic route, _layout.tsx = layout wrapper ของ folder นี้ ทำให้ทีมใหม่เข้าใจโครงสร้างแอปได้ภายในไม่กี่นาที

Stack vs Tab vs Modal

การเลือก navigation pattern ที่ถูกเป็นเรื่องสำคัญต่อ UX — Tab เหมาะกับเนื้อหาหลักที่ผู้ใช้สลับไปมา, Stack เหมาะกับ flow ที่มีความต่อเนื่อง (เช่น checkout), Modal เหมาะกับงาน single-task ที่แยกจาก flow ปกติ

ถ้าผู้ใช้ต้องคิดว่า back button จะพาไปไหน — แปลว่าคุณวาง navigation ผิด

Rule of thumb

Tab ไม่ควรเกิน 5 อัน — เกินกว่านี้ไม่มีที่วางและผู้ใช้จำไม่ได้, Stack ไม่ควรลึกเกิน 3-4 ชั้น — ถ้าลึกกว่านั้นให้ design flow ใหม่, Modal ควรมีวิธี dismiss ที่ชัดเจน (swipe down หรือปุ่ม X มุมบน)

Deep linking

File-based routing ทำให้ deep linking ทำงานได้ทันทีโดยไม่ต้อง config ทุก screen มี URL ของตัวเอง ทำให้ share link ในแอปได้เหมือนเว็บ เช่น myapp://posts/abc123 จะพาไปหน้า [id] ใน folder posts/

Universal links

สำหรับ production ต้อง setup Associated Domains (iOS) + assetlinks.json (Android) เพื่อให้ link จากเว็บเปิดในแอปได้ Expo มี EAS Build + app.json config ที่ทำให้ขั้นตอนนี้ไม่ยากเท่าเมื่อก่อน

Tips ที่ใช้ได้จริง

1. Group folders

ใช้ (group) ในชื่อ folder เพื่อจัด route ให้เป็น group โดย URL ไม่เปลี่ยน เหมาะสำหรับแบ่ง code ตาม feature โดย URL ยังสะอาด เช่น (auth)/login, (auth)/register — URL เป็น /login, /register

2. Layout inheritance

_layout.tsx ของแต่ละ folder ทำงานเป็น wrapper ของทุก screen ภายใน ช่วยให้ share context, navigation options, หรือ auth guard ได้สะดวก โดยไม่ต้อง duplicate code ในทุก screen

3. Loading state

ใช้ Suspense + React Query ทำ loading state ได้สวย ไม่ต้องเขียน if (isLoading) return <Spinner /> ทุก screen — ย้ายไปอยู่ใน layout เลยง่ายกว่าเยอะ

สรุป

Expo Router ลด cognitive load ของ team ได้มากสำหรับแอปขนาดกลางขึ้นไป ข้อดีคือ mental model เดียวกับ Next.js ทำให้ full-stack developer ที่ทำเว็บมาก่อนใช้ได้เกือบทันที ส่วนที่ต้องใช้เวลาเรียนคือความรู้เรื่อง React Navigation ที่ยังเป็นตัวจริงเบื้องหลัง