flutterdartflutter-go-router

Is there an essential difference how the GoRouter's configuration is created with or without sub-routes for MOBILE flutter app?


Let's say we have GoRouter configurations where first one contains the sub-route and second one no.

GoRouter(
  routes: [
    GoRoute(
      path: '/users',
      routes: [
        GoRoute(
          path: ':id',
        ),
      ],
    ),
  ],
)
GoRouter(
  routes: [
    GoRoute(
      path: '/users',
    ),
    GoRoute(
      path: '/users/:id',
    ),
  ],
)

The simple code for switching pages is:

// Go to users list
GoRouter.of(context).go('/users');

// Go to user ` details
GoRouter.of(context).go('/users/1');

I think they both will work correctly but I am sure there is a difference. Which? It is possible the configuration with sub-routes is important only for web?


Solution

  • Both setups let you navigate the same way, but they handle related routes differently:

    Sub-routes: Group routes under a parent. For example, if you have /user/create, /user/get, /user/update, and /user/delete, you can put them all under /user. Add middleware (like authentication checks) to the parent /user, and it applies to all the child routes automatically. It’s easier and cleaner for related routes.

    Flat routes: Define each route separately. You’d need to add /user/create, /user/get, /user/update, and /user/delete individually and apply the middleware to each one. This gives you more control but can get repetitive.

    Sub-routes = cleaner and easier for related routes. Flat = more work but more flexible.