Indie Hacker Mobile Apps · บทเรียน

สถาปัตยกรรมการนำทางและการกำหนดเส้นทาง

ออกแบบชั้นการนำทางสำหรับแอปมือถือให้สะอาดและขยายได้ โดยใช้สแตก แท็บ ลิงก์เชิงลึก และตัวป้องกันเส้นทาง เพื่อให้ลำดับการใช้งานคาดเดาได้เมื่อแอปเติบโต

บทเรียน 4 จาก 413 ขั้นตอน

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

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Navigation Is Architecture

How users move through your app is a core architectural concern, not an afterthought. A messy navigation layer leaks state and breaks the back button.

This lesson covers patterns that keep flows predictable.

The Navigation Stack

Mobile navigation is built on a stack: pushing a screen adds it on top, going back pops it off.

Push: go deeper
Pop: go back
Replace: swap the top screen

The stack mirrors the user's mental history.

Tabs and Nested Stacks

Most apps combine a tab bar with a stack inside each tab. Each tab keeps its own history, so switching tabs does not lose your place.

This nesting is the backbone of modern mobile UX.

Defining Routes

Centralize your route names so they are not scattered as magic strings. A route map keeps navigation consistent and refactor-safe.

const Routes = {
  Home: 'home',
  Profile: 'profile',
  Settings: 'settings'
};
console.log(Routes.Profile);

Passing Parameters

Screens often need data, like which item to show. Pass typed parameters with navigation rather than relying on global state.

function navigateToDetail(id) {
  const params = { itemId: id };
  return { route: 'detail', params };
}
console.log(navigateToDetail(42));

Deep Linking

A deep link opens a specific screen from outside the app — a URL like myapp://item/42. Deep links power notifications, sharing, and marketing campaigns.

Map URL patterns to routes in one place.

Route Guards

Some screens require auth or a completed onboarding step. A route guard checks a condition before allowing navigation and redirects if it fails.

function canEnter(route, isLoggedIn) {
  const protectedRoutes = ['profile', 'settings'];
  if (protectedRoutes.includes(route) && !isLoggedIn) return 'login';
  return route;
}
console.log(canEnter('profile', false));

Separating Navigation from Screens

Screens should not know how navigation works internally. Inject a navigation service or callback so screens stay testable and reusable.

This decoupling keeps your architecture clean.

Handling Back Behavior

The hardware back button on Android and gestures on iOS must behave sensibly. Decide per screen whether back exits a flow, confirms a discard, or is blocked.

Predictable back behavior is a hallmark of polish.

Avoiding Navigation Spaghetti

As apps grow, avoid these traps:

Hardcoded route strings everywhere
Deeply nested stacks no one understands
Business logic inside navigation handlers

A central route map and guards keep complexity in check.

A Clean Navigation Layer

Put it together:

Central route definitions
Tabs wrapping nested stacks
Typed parameters between screens
Deep link mapping in one place
Guards for protected routes

This structure scales from MVP to mature app.

Quick Check

Test your navigation architecture knowledge.

ตอบคำถามในบทเรียนแบบโต้ตอบ

Recap

You designed a navigation layer:

Stacks model push/pop history; tabs hold nested stacks
Centralize route names and pass typed parameters
Deep links open specific screens from outside
Guards protect restricted routes
Decouple navigation from screens for testability

Clean navigation keeps flows predictable as you scale.

เริ่มต้นได้ฟรี

เรียนรู้ Indie Hacker Mobile Apps ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 12
บทเรียน: 48

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “สถาปัตยกรรมการนำทางและการกำหนดเส้นทาง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “สถาปัตยกรรมการนำทางและการกำหนดเส้นทาง”

ออกแบบชั้นการนำทางสำหรับแอปมือถือให้สะอาดและขยายได้ โดยใช้สแตก แท็บ ลิงก์เชิงลึก และตัวป้องกันเส้นทาง เพื่อให้ลำดับการใช้งานคาดเดาได้เมื่อแอปเติบโต คุณปฏิบัติ Indie Hacker Mobile Apps ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “สถาปัตยกรรมการนำทางและการกำหนดเส้นทาง” ใช้เวลานานแค่ไหน

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

ฉันเขียนและรันโค้ดในบทเรียน Indie Hacker Mobile Apps นี้ได้ไหม

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

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

← กลับไปที่ Indie Hacker Mobile Apps