Flutter WebMedium30 XP4 min read
How does URL routing work in Flutter Web?
TL;DR: Flutter Web supports URL-based routing. go_router is the recommended package — it syncs the browser URL bar with your routes, supports browser back/forward, deep links, query parameters, and guarded routes.
Full Answer
On mobile, Navigator routes are a stack. On web, users expect bookmarkable URLs and browser back button support. go_router (officially supported by Google) handles this.
go_router Features
- ▸URL reflects current route: /questions/flutter-core-001
- ▸Browser back/forward navigates correctly
- ▸Named routes + path parameters: /categories/:category
- ▸Redirect guards: redirect unauthenticated users
- ▸ShellRoute: persistent bottom nav without page rebuild
🎯
Set usePathUrlStrategy() before runApp() to remove the # from URLs (hash-based vs path-based routing). Requires server-side SPA routing config to serve index.html for all paths.
Code Examples
dartgo_router for Flutter Web
Output
// Browser URL: https://dartdosage.fluxpert.com/questions/flutter-core-001 // Back button works correctly with browser history
Common Mistakes
- ✗Not using usePathUrlStrategy() — URLs have # prefix by default: /quiz#/setup
- ✗Not configuring server-side routing for SPA — navigating directly to /questions/xyz returns 404 on reload
Interview Tip
💡
Deep linking + browser back/forward + bookmarkable URLs — these are the three web routing requirements. Show go_router handles all three.
#go-router#url-routing#deep-link#browser-history