Named Routes (เส้นทางที่ตั้งชื่อ)

ใน React Router คุณกำหนด route configuration — array หรือ JSX tree ของ <Route path="..." element={...} /> objects — และ router จะ render component ที่ตรงกันตาม URL ปัจจุบัน Flutter มีสิ่งที่เทียบเคียงได้แบบ built-in ที่เรียบง่ายกว่า: routes map บน MaterialApp ที่เชื่อมโยง string name กับ builder function การเรียก Navigator.pushNamed(context, '/detail') จะค้นหาชื่อใน map และ push หน้าจอที่ตรงกัน

Named routes แก้ปัญหาเดียวกับ path config ของ React Router: คุณแยก navigation call site ออกจาก screen widget จริง ๆ ทำให้สามารถเปลี่ยนชื่อหรือย้าย screen ได้โดยไม่ต้องอัปเดตทุก push call

การเปรียบเทียบแบบ side-by-side

// React Router v6 — route config
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  { path: '/',        element: <HomeScreen /> },
  { path: '/detail',  element: <DetailScreen /> },
  { path: '/profile', element: <ProfileScreen /> },
]);

// Navigate by path string
navigate('/detail');
navigate('/profile');

// Flutter — named routes map
MaterialApp(
  initialRoute: '/',
  routes: {
    '/':        (context) => const HomeScreen(),
    '/detail':  (context) => const DetailScreen(),
    '/profile': (context) => const ProfileScreen(),
  },
);

// Navigate by name
Navigator.pushNamed(context, '/detail');
Navigator.pushNamed(context, '/profile');

🔀 React Router path config → Flutter routes map

routes: บน MaterialApp — map อยู่บน root MaterialApp widget คล้ายกับการวาง router ไว้ที่ top ของ React component tree ของคุณ keys เป็น string; values เป็น builder function (BuildContext) => Widget
initialRoute — แทนที่ index route ของ React Router โดยเป็นชื่อ route ที่ Flutter push ก่อนเป็นอันดับแรก
Navigator.pushNamed vs navigate(path) — ทั้งคู่รับ string key และนำทางไปยัง screen ที่ตรงกัน รูปแบบ API เกือบเหมือนกันทุกประการ
Navigator.pushReplacementNamed — แทนที่ route ปัจจุบันแทนที่จะ push ทับ เทียบเท่ากับ navigate(path, { replace: true }) ของ React Router
Navigator.popAndPushNamed — pop route ปัจจุบันและ push อันใหม่ทันที มีประโยชน์สำหรับ wizard flows
ข้อจำกัด: ไม่รองรับ URL params ใน named routes. Named routes แบบ built-in ของ Flutter ไม่รองรับ path parameter เช่น /detail/:id สำหรับสิ่งนั้นคุณต้องใช้ go_router (ครอบคลุมในบทเรียนถัดไป)

ตัวอย่างที่รันได้

Flutter / DartOpen in DartPad ↗ (copies code)

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/':        (context) => const HomeScreen(),
        '/about':   (context) => const AboutScreen(),
        '/contact': (context) => const ContactScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () => Navigator.pushNamed(context, '/about'),
              child: const Text('About'),
            ),
            const SizedBox(height: 12),
            ElevatedButton(
              onPressed: () => Navigator.pushNamed(context, '/contact'),
              child: const Text('Contact'),
            ),
          ],
        ),
      ),
    );
  }
}

class AboutScreen extends StatelessWidget {
  const AboutScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About')),
      body: const Center(child: Text('About page')),
    );
  }
}

class ContactScreen extends StatelessWidget {
  const ContactScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Contact')),
      body: const Center(child: Text('Contact page')),
    );
  }
}