使用go_router软件包时热重新加载的未知行为

Question

我在项目中使用 go_router 。我有一个带有Gorouter实例的单独文件，其中包括所有路由（家，登录，注册）。然后，我添加了用Cubit的身份验证。因此，我必须将Gorouter实例修改为使用Auth Cubit接收的函数，并将其重定向到适当的路线。

一切似乎都还好，但后来我意识到了一些东西。例如，如果我在登录路线中并将寄存器推到堆栈并修改寄存器页面并保存文件，则热加载将带我回到登录。因此，每次我想对寄存器页面进行一些更改时，我都会返回登录路线，然后手动返回寄存器查看我的更改。

这是一个示例：

demo app

ps：我刚刚开始使用 go_router package所以也许我正在做一些错误的事情。

Answer 1

该解决方案简单

---

gorouter 存储路线的状态。如果您创建了 gorouter 的新实例，则它会失去状态并导航到初始路线。

为了解决这个问题，我创建了 gorouter 的实例，并将其存储为单例或全局实例。

class AuthNavigation {

  static const String settings = '/';
  static const String myFriends = '/my_friends';
  
  
  final GoRouter goRouter; // This instance will be store route state
  
  AuthNavigation() : goRouter = _router;

  static GoRouter get _router => GoRouter(
        routes: <GoRoute>[...],
      );
      
}

Answer 2

只需将路由器标记为 static ，就可以在每次初始化 youterapp.router（）中使用相同的实例，

class AppRouter {
  static final GoRouter _router = GoRouter(
    routes: [
      GoRoute(
        path: "/",
        builder: (context, state) => const HomeScreen(),
      ),
    ],
  );

  GoRouter get router => _router;
}

并且在portialapp.router（）中：

MaterialApp.router(
   routerDelegate: AppRouter().router.routerDelegate,
   routeInformationProvider: AppRouter().router.routeInformationProvider,
   routeInformationParser: AppRouter().router.routeInformationParser,
 )

Answer 3

您应该将创建的路由类定义为最终，并将其提供给材料应用程序。它对我有用。
最终_appRouter = navigatorroutes（）;
routerconfig：_approuter.router，

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  await EasyLocalization.ensureInitialized();
  runApp(EasyLocalization(
    supportedLocales: LocalizationsConfig.supportedLocales,
    path: LocalizationsConfig.path,
    child: App(),
  ));
}

class App extends StatelessWidget {
  App({super.key});
  final _appRouter = NavigatorRoutes();
  final _providers = Providers();
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: _providers.items,
      child: MaterialApp.router(
        debugShowCheckedModeBanner: false,
        title: 'Map Mates',
        theme: AppTheme.baseScheme,
        routerConfig: _appRouter.router,
      ),
    );
  }
}

我的navigatorroutes类是这样

part of 'app_config.dart';

class NavigatorRoutes {
  final GoRouter router = GoRouter(
    errorBuilder: (BuildContext context, GoRouterState state) => const NotFoundPage(),
    initialLocation: RouteName.root.path,
    routes: <RouteBase>[
      GoRoute(
        path: RouteName.root.path,
        builder: (BuildContext context, GoRouterState state) {
          return const Root();
        },
        routes: <RouteBase>[
          GoRoute(
            path: RouteName.mapScreen.routeName,
            builder: (BuildContext context, GoRouterState state) {
              return const MapBasePage();
            },
          ),
          GoRoute(
            path: RouteName.loginScreen.routeName,
            builder: (BuildContext context, GoRouterState state) {
              return const LoginPage();
            },
          ),
          GoRoute(
            path: RouteName.singInScreen.routeName,
            builder: (BuildContext context, GoRouterState state) {
              return const SingInPage();
            },
          ),
          GoRoute(
            path: RouteName.frogPassPage.routeName,
            builder: (BuildContext context, GoRouterState state) {
              return const FrogPassPage();
            },
          ),
          GoRoute(
            path: RouteName.homePage.routeName,
            builder: (BuildContext context, GoRouterState state) {
              return const HomePage();
            },
          ),
          GoRoute(
            path: RouteName.editProfilePage.routeName,
            builder: (BuildContext context, GoRouterState state) {
              return const EditProfilePage();
            },
          ),
        ],
      ),
      GoRoute(
        path: RouteName.camera.path,
        builder: (BuildContext context, GoRouterState state) {
          return const CameraPage();
        },
      ),
      GoRoute(
        path: RouteName.playerPage.path,
        builder: (BuildContext context, GoRouterState state) {
          var data = state.extra as Map<String, dynamic>;
          return EditContentPage(
            imageFile: data['imageFile'],
            videoFile: data["videoFile"],
          );
        },
      ),
    ],
  );
}

Answer 4

我做了一个可以正常工作的解决方法。
您可以使用示例代码查看模板存储库。

它由飞溅，入职，标志以及带有纳维尔和子女页面的家庭组成。

也可以与 redirect 一起使用 authstate changeNotifier 。

https://github.com/christer.com/christer-christer-muntean/go_router_router_with_with_with_with_navbar <

/> > APP视频预览此处： https://www.utvikler.app/post/post/spar-tid-tid-tid-gog-resser--resefektiv-navigering-inavigering-i-i-i-i-flutter-i-flutter-med-go_router-med-go_router-mot-go_router-motforsk----- V％C3％A5RT-GITHUB-REPO

Answer 5

如果您使用Authstate提供商检查用户是否已登录并重定向他，则使用GO_ROUTER非常棘手。
当我开始使用Gorouter的重定向方法时，它似乎真的很容易管理，但是后来我意识到热重新加载总是将我重定向到InitialRoute'/'。
在我的项目中，我使用RiverPod检查Authstate（Ref.Watch（CurrentUserAccountProvider））。但是要在Gorouter配置中使用此代码，配置必须是动态的（vs static）。每当您的应用程序重建时（ - ＆gt;重定向到“/”），

这是我的解决方案。我很狂热，所以我不知道这是一个好习惯，有经验的用户可以说，但至少对我有用。

Gorouter配置文件：

/// The route configuration.
class MyRouterConfig {
  MyRouterConfig();

  GoRouter get router => _router;

  static final GoRouter _router = GoRouter(
    routes: <RouteBase>[
      GoRoute(
        path: '/signin',
        builder: (BuildContext context, GoRouterState state) {
          return const SignInView();
        },
      ),
      GoRoute(
        path: '/signup',
        builder: (BuildContext context, GoRouterState state) {
          return const SignUpView();
        },
      ),
      GoRoute(
        path: '/',
        builder: (BuildContext context, GoRouterState state) {
          return const HomeView();
        },
      ),
      GoRoute(
        path: '/otherview',
        builder: (BuildContext context, GoRouterState state) {
          return const OtherView();
        },
      ),
    ],
    routerNeglect: true,
  );
}

然后，我创建了一个小部件来管理Authstate的重定向：
Checkauthwidget：

class CheckAuthWidget extends ConsumerWidget {
  final Widget child;
  const CheckAuthWidget({super.key, required this.child});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final currentUserAccount = ref.watch(currentUserAccountProvider);
    final GoRouter router = MyRouterConfig().router; // Get the router config directly from MyRouterConfig instead of GoRouter.of(context)
    final currentLocation = router.routerDelegate.currentConfiguration.fullPath;
    final List<String> authorizedRoutes = ['/signin', '/signup'];

    return currentUserAccount.when(
      data: (user) {
        // If the user is not connected -> redirect to /signin
        if (user == null && !authorizedRoutes.contains(currentLocation)) {
          router.go('/signin');
        }

        if (user != null &&
            (currentLocation == '/signin' || currentLocation == '/signup')) {
          router.go('/');
        }
        return child;
      },
      loading: () => LoaderWidget(),
      error: (error, stackTrace) => Text(error.toString()),
    );
  }
}

这是我的主要：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const ProviderScope(child: MyApp()));
}

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    return MaterialApp.router(
        title: 'Family Menu',
        routerDelegate: MyRouterConfig().router.routerDelegate,
        routeInformationParser:
            MyRouterConfig().router.routeInformationParser,
        routeInformationProvider:
            MyRouterConfig().router.routeInformationProvider,
        scaffoldMessengerKey: scaffoldMessengerKey,
        supportedLocales: AppLocalizations.supportedLocales,
        localizationsDelegates: AppLocalizations.localizationsDelegates,
        debugShowCheckedModeBanner: false,
        builder: (context, child) => CheckAuthWidget(child: child!),
    );
  }
}

我希望这可以帮助别人，请告诉我我是否做错了什么:)

Answer 6

尝试这样实施：

class MyApp extends ConsumerWidget {
  MyApp({Key? key}) : super(key: key);
  late final appRoutes = AppRoutes();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final ThemeModeState currentTheme = ref.watch(themeProvider);

    return MaterialApp.router(
      title: 'Starmie',
      debugShowCheckedModeBanner: false,
      theme: lightTheme,
      darkTheme: darkTheme,
      themeMode: currentTheme.themeMode,
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      routeInformationParser: appRoutes.goRouter.routeInformationParser,
      routerDelegate: appRoutes.goRouter.routerDelegate,
      routeInformationProvider: appRoutes.goRouter.routeInformationProvider,
    );
  }
}

Answer 7

通过遵循代码，您可以实现欲望输出。

///this class contaqins list of go router which will be use in the app
class AppRoute {
  // using a factory is important
  // because it promises to return _an_ object of this type
  // but it doesn't promise to make a new one.
  ///return the instance of the
  factory AppRoute() => _instance;
  AppRoute._internal() {
    // initialization logic
  }
  // This named constructor is the "real" constructor
  // It'll be called exactly once, by the static property assignment above
  // it's also private, so it can only be called in this class

  static final AppRoute _instance = AppRoute._internal();
  static final GoRouter _router = GoRouter(
    navigatorKey: _rootNavigatorKey,
    routes: routeBase,
    errorBuilder: (BuildContext context, GoRouterState state) =>
        const NotFound(),
  );

  ///list of route base for the router
  static List<RouteBase> routeBase = <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) =>
          const SpalshScreen(),
    ),
    GoRoute(
        path: AppRoutes.internalError,
        builder: (BuildContext context, GoRouterState state) =>
            const InternalError()),

  ];

  ///retrun router object with initial location
  static GoRouter getRoute(String initialLocation) => GoRouter(
        navigatorKey: _rootNavigatorKey,
        routes: routeBase,
        initialLocation: initialLocation,
        errorBuilder: (BuildContext context, GoRouterState state) =>
            const NotFound(),
      );

  ///return router object
  static GoRouter get router => _router;
}

///this class hold the custom routes name that will be use in the app
class AppRoutes {
  ///return routename ='internal-error'
  static String internalError = '/internal-error';

}

Answer 8

如果其他人仍然遇到问题，那么这就是解决方案

main.dart

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: klightTheme,
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorScheme: kdarkTheme,
        useMaterial3: true,
      ),
      routerConfig: MyRoute.routes,
    );
  }
}

路由

class MyRoute {
  // here was the problem in my case i wasn't using the static property and this cause the the page reload to the initial route.
  static final GoRouter routes = GoRouter( 
    initialLocation: '/',
    routes: [
      GoRoute(
        path: '/',
        name: WelcomeScreen.id,
        builder: (context, state) {
          return const WelcomeScreen(title: 'Hello World');
        },
      ),
      GoRoute(
        path: '/${LoginScreen.id}',
        name: LoginScreen.id,
        builder: (context, state) {
          return const LoginScreen();
        },
      ),
      GoRoute(
        path: '/${RegisterScreen.id}',
        name: RegisterScreen.id,
        builder: (context, state) {
          return const RegisterScreen();
        },
      ),
      GoRoute(
        path: '/${ChatScreen.id}',
        name: ChatScreen.id,
        builder: (context, state) {
          return const ChatScreen();
        },
      ),
    ],
  );
}