NavigationAdvanced50 XP4 min read
How does Flutter Web handle browser navigation (back/forward buttons)?
TL;DR: go_router on Flutter Web automatically syncs the browser URL with navigation state and handles browser back/forward buttons. The RouterDelegate pushes/pops browser history entries via the History API.
Full Answer
Flutter Web runs inside a browser, so navigation must integrate with the browser's History API. go_router handles this transparently.
- ▸go_router uses RouteInformationProvider backed by the browser's URL
- ▸context.go() pushes a new browser history entry
- ▸context.replace() replaces the current history entry (no back button)
- ▸Browser back → Router receives pop → RouterDelegate updates routes
- ▸Hash vs path routing: configure in GoRouter.urlPathStrategy
🎯
Call usePathUrlStrategy() before runApp() to use clean URLs (e.g., /product/42) instead of hash URLs (#/product/42). Requires web server configuration for 404 handling.
Code Examples
dartgo_router with path URL strategy
Output
Browser URL bar shows /products; back button correctly navigates to previous route
Common Mistakes
- ✗Using hash strategy and not configuring it — URLs look like /#/route which is unfriendly for SEO
- ✗Not configuring the web server to serve index.html for all paths — direct URL access gives 404
Interview Tip
💡
The server-side configuration for path URL strategy (serving index.html for all routes) is often forgotten. Mentioning it shows you've actually deployed Flutter Web.
#Flutter-Web#browser-navigation#URL#history#go_router