go_router

Flutter’s built-in Navigator is imperative and has no concept of URL paths or nested routes. For anything beyond a simple push/pop flow — deep links, URL params, nested navigation, web URLs — you reach for the official go_router package. It brings a declarative route configuration that maps almost directly onto React Router v6’s createBrowserRouter.

go_router is maintained by the Flutter team and is the officially recommended routing solution for production Flutter apps.

Note: go_router requires adding go_router to your pubspec.yaml. It cannot be run in DartPad, so code in this lesson is for reference only.

Side-by-side comparison

// 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 — both take a list of route definitions and return a router object that you hand to your root widget. In Flutter you pass the GoRouter instance to MaterialApp.router.
GoRoute vs { path, element } — each GoRoute has a path and a builder. The builder receives a GoRouterState (equivalent to React Router’s loader params + useParams).
state.pathParameters['id'] — named URL segments like :id are extracted from GoRouterState.pathParameters, equivalent to useParams() in React Router.
context.go(path) vs navigate(path) — go_router extends BuildContext with .go(), .push(), and .pop() methods. context.go('/path') replaces the current route (like navigate with replace: true). context.push('/path') stacks on top.
ShellRoute vs nested <Outlet /> — ShellRoute wraps child routes with a persistent shell widget (e.g., a scaffold with a bottom nav bar), equivalent to a layout route in React Router.
Deep links and web URLs — go_router syncs routes with the platform URL on Flutter Web and handles OS deep links on mobile. The imperative Navigator does not do this out of the box.