Hot Reload is Navigating Back to Initial Route

[osaxma]

This is a lesson learned that I would like to share in case someone else faces the same issue 😅

issue:
Whenever I hot reload my app or save a file, the app navigates back to the initial route (i.e. /).

Cause:
After migrating to go_router, the top widget of my app was an AuthProvider widget so my App looked something like this:

void main() {
  runApp(const AuthProvider());
}

class AuthProvider extends StatelessWidget {
  const AuthProvider({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) => RootApp();
}

class RootApp extends StatelessWidget {
  RootApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: _router.routeInformationParser,
      routerDelegate: _router.routerDelegate,
    );
  }

  late final _router = GoRouter(
    initialLocation: '/',
    routes: [
      GoRoute(
        path: '/',
        pageBuilder: (context, state) {
          return MaterialPage(key: state.pageKey, child: const MyHomePage());
        },
        routes: [ /* ... GoRoutes ... */ ],
    errorPageBuilder: (context, state) {
      return MaterialPage(key: state.pageKey, child: ErrorPage(state.error));
    },
  );
}

Solution:
To fix the issue, there are two approaches:

• Keep the same structure but convert RootApp to a StatefulWidget and the issue will be gone.
• Move RootApp to the top and use GoRouter.navigatorBuilder to wrap any providers that need to be on top of the navigator.

[csells]

Good pro tips. Thank you!