Some applications might require circular (recursive) routing with the full stack state preservation, for instance a user might have posts, post details page might have a reference to the author, and the author page would be the same user page which displays the posts in the first place, and it would be needed to preserve the full user -> post -> user -> post -> user navigation stack to provide the proper back navigation journey.

With the legacy Navigator APIs it is relatively straightforward to just push the pages on top of the stack as many times as possible, but how can this be done with Navigator 2.0 declarative APIs (in the case of go_router, for instance)?

To provide the baseline, a straightforward definition of the GoRouter for this example without the recursive navigation support would be the following:

GoRouter(
  routes: [
    GoRoute(
      path: '/users/:user_id',
      builder: (context, state) => UserPage(id: state.pathParameters['user_id'] as String),
      routes: [
        GoRoute(
          path: 'posts/:post_id',
          builder: (context, state) => PostPage(id: state.pathParameters['post_id'] as String),
          routes: [
            // Cannot really recursively declare the `user -> post -> ...` stack?
          ],
        ),
      ],
    ),
  ],
);

Some applications might require circular (recursive) routing with the full stack state preservation, for instance a user might have posts, post details page might have a reference to the author, and the author page would be the same user page which displays the posts in the first place, and it would be needed to preserve the full user -> post -> user -> post -> user navigation stack to provide the proper back navigation journey.

With the legacy Navigator APIs it is relatively straightforward to just push the pages on top of the stack as many times as possible, but how can this be done with Navigator 2.0 declarative APIs (in the case of go_router, for instance)?

To provide the baseline, a straightforward definition of the GoRouter for this example without the recursive navigation support would be the following:

GoRouter(
  routes: [
    GoRoute(
      path: '/users/:user_id',
      builder: (context, state) => UserPage(id: state.pathParameters['user_id'] as String),
      routes: [
        GoRoute(
          path: 'posts/:post_id',
          builder: (context, state) => PostPage(id: state.pathParameters['post_id'] as String),
          routes: [
            // Cannot really recursively declare the `user -> post -> ...` stack?
          ],
        ),
      ],
    ),
  ],
);

• flutter
• flutter-navigation
• flutter-go-router

1 Answer 1

In go_router, you can still have same behavior as the legacy Navigator api

GoRouter(
  routes: [
    GoRoute(
      path: '/users/:user_id',
      builder: (context, state) => UserPage(key: state.pageKey, id: state.pathParameters['user_id'] as String),
     
    ),
    GoRoute(
          path: 'posts/:post_id',
          builder: (context, state) => PostPage(key: state.pageKey, id: state.pathParameters['post_id'] as String),
          
        ),
  ],
);

To push a page in the stack, use context.push(route_name); this has same function as Navigator.of(context).push. The context.go replaced the whole stack.