Navigation

GoRouter Modular uses GoRouter's navigation API. All standard methods are available.

Basic Navigation

// Replace the current route stack
context.go('/products');
 
// Push a new page onto the stack
context.push('/products/123');
 
// Go back
context.pop();
 
// Replace the current page
context.replace('/dashboard');

Async Navigation

Wait for module binds to be resolved before navigating:

await context.goAsync('/products', onComplete: () {
  print('Products module ready');
});
 
await context.pushAsync('/products/123', onComplete: () {
  print('Product detail ready');
});

Named Routes

Define a name on a route and navigate by name:

// Define
ChildRoute(
  '/user/:id',
  name: 'user-detail',
  child: (_, state) => UserPage(id: state.pathParameters['id']!),
)
 
// Navigate
context.goNamed('user-detail', pathParameters: {'id': '123'});

Route Parameters

Path Parameters

// Define
ChildRoute('/product/:id', child: (_, state) =>
  ProductPage(id: state.pathParameters['id']!))
 
// Navigate
context.go('/product/42');

Query Parameters

// Navigate
context.go('/search?q=flutter&category=packages');
 
// Access
final query = state.uri.queryParameters;
final searchTerm = query['q'];       // 'flutter'
final category = query['category'];  // 'packages'

Web Support

GoRouter Modular works on web with full support for:

Browser back/forward buttons
URL bar updates on navigation
Deep linking — users can bookmark or share URLs
Direct URL access — navigating to /products/42 loads the correct page

No additional configuration is required.

Best Practices

Use go() for top-level navigation — Replaces the entire route stack.
Use push() for detail pages — Adds to the stack so the user can go back.
Use descriptive paths — /products/123 is better than /p/123.
Use goAsync() when you need to wait — Ensures module binds are ready before rendering.

Shell Routes Overview