go_router

Navigator แบบ built-in ของ Flutter เป็น imperative และไม่มีแนวคิดของ URL path หรือ nested route สำหรับทุกอย่างที่เกินกว่า simple push/pop flow — deep links, URL params, nested navigation, web URLs — คุณต้องใช้แพ็กเกจ go_router อย่างเป็นทางการ go_router ให้ declarative route configuration ที่ตรงกับ createBrowserRouter ของ React Router v6 เกือบทุกประการ

go_router ดูแลโดย Flutter team และเป็น routing solution ที่แนะนำอย่างเป็นทางการสำหรับแอป Flutter ใน production

หมายเหตุ: go_router ต้องเพิ่มลงใน pubspec.yaml ของคุณ ไม่สามารถรันใน DartPad ได้ ดังนั้น code ในบทเรียนนี้มีไว้สำหรับอ้างอิงเท่านั้น

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

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

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { index: true,        element: <HomeScreen /> },
      { path: 'products',   element: <ProductList /> },
      { path: 'products/:id', element: <ProductDetail /> },
    ],
  },
]);

// In ProductDetail:
const { id } = useParams();

// go_router
import 'package:go_router/go_router.dart';

final router = GoRouter(
  routes: [
    ShellRoute(
      builder: (context, state, child) =>
          RootLayout(child: child),
      routes: [
        GoRoute(
          path: '/',
          builder: (context, state) => const HomeScreen(),
        ),
        GoRoute(
          path: '/products',
          builder: (context, state) => const ProductList(),
        ),
        GoRoute(
          path: '/products/:id',
          builder: (context, state) {
            final id = state.pathParameters['id']!;
            return ProductDetail(id: id);
          },
        ),
      ],
    ),
  ],
);

// Navigate:
context.go('/products/42');

🔀 React Router v6 → go_router

GoRouter vs createBrowserRouter — ทั้งคู่รับ list ของ route definition และ return router object ที่คุณส่งให้ root widget ใน Flutter คุณส่ง GoRouter instance ให้ MaterialApp.router
GoRoute vs { path, element } — แต่ละ GoRoute มี path และ builder builder ได้รับ GoRouterState (เทียบเท่ากับ loader params + useParams ของ React Router)
state.pathParameters['id'] — URL segment ที่มีชื่อเช่น :id ถูกดึงออกจาก GoRouterState.pathParameters เทียบเท่ากับ useParams() ใน React Router
context.go(path) vs navigate(path) — go_router ขยาย BuildContext ด้วย method .go(), .push(), และ .pop() context.go('/path') แทนที่ route ปัจจุบัน (เหมือน navigate ที่มี replace: true) context.push('/path') stack บนสุด
ShellRoute vs nested <Outlet /> — ShellRoute wraps child route ด้วย persistent shell widget (เช่น scaffold ที่มี bottom nav bar) เทียบเท่ากับ layout route ใน React Router
Deep links และ web URLs — go_router sync route กับ platform URL บน Flutter Web และจัดการ OS deep link บนมือถือ Navigator แบบ imperative ไม่ทำสิ่งนี้โดยตรง