Flutter Web中GoRouter浏览器返回按钮导航顺序不保留问题

问题原因 #

1. 路由结构设计缺陷：Page1、Page2、Page3被设置为Dashboard的同级子路由，而非嵌套层级路由。这种平级结构下，push导航操作无法形成清晰的栈层级，导致GoRouter的导航栈与浏览器历史记录同步逻辑混乱。
2. 静态Context风险：Nav类中使用静态context = navigatorKey.currentContext!，在应用运行过程中可能获取到非当前路由的上下文，导致push/pop操作未正确关联当前导航栈，进而破坏浏览器历史的同步。
3. 配置与路由不匹配：GoRouter.optionURLReflectsImperativeAPIs = true要求命令式导航同步到URL和浏览器历史，但平级路由的URL路径无层级关系，导致历史记录更新异常。

解决方案 #

1. 重构为嵌套层级路由 #

将Page1、Page2、Page3设置为嵌套子路由，形成Dashboard → Page1 → Page2 → Page3的清晰层级，让导航栈与浏览器历史自然同步：

static GoRouter router = GoRouter(
  navigatorKey: Nav.getKey(),
  initialLocation: Routes.DASHBOARD,
  observers: [NavigatorObserver()],
  routes: [
    GoRoute(
      name: Routes.DASHBOARD,
      path: Routes.DASHBOARD,
      builder: (context, state) => const Dashboard(),
      routes: [
        GoRoute(
          name: Routes.PAGE1,
          path: Routes.PAGE1.subRoute, // 示例值："page1"
          builder: (context, state) => BlocProvider(
            create: (context) => Page2Bloc(),
            child: const Page1(),
          ),
          routes: [
            GoRoute(
              name: Routes.PAGE2,
              path: Routes.PAGE2.subRoute, // 示例值："page2"
              builder: (context, state) => Page2(
                key: UniqueKey(),
                routeData: _getRouteData<double>(state),
              ),
              routes: [
                GoRoute(
                  name: Routes.PAGE3,
                  path: Routes.PAGE3.subRoute, // 示例值："page3"
                  builder: (context, state) => const Page3(),
                ),
              ],
            ),
          ],
        ),
      ],
    ),
  ],
  errorPageBuilder: (context, state) => const MaterialPage(
    child: Scaffold(
      body: SafeArea(child: Center(child: Text("404 Not Found!"))),
    ),
  ),
);

重构后完整路径为/dashboard/page1/page2/page3，每一步push都会在栈中添加层级，pop时正确回退，浏览器历史同步更新。

2. 修复Nav类的Context问题 #

移除静态context，改为动态获取当前上下文，避免上下文异常导致的导航错误：

class Nav {
  static GlobalKey<NavigatorState> navigatorKey = GlobalKey();

  static GlobalKey<NavigatorState> getKey() => navigatorKey;

  static Future<T?> to<T extends Object?>(
    String route, {
    BuildContext? buildContext,
    Object? extra,
  }) {
    final ctx = buildContext ?? navigatorKey.currentContext;
    assert(ctx != null, "Navigator context cannot be null");
    return ctx!.push<T>(route, extra: extra);
  }

  static void off(
    String route, {
    BuildContext? buildContext,
    Object? extra,
  }) {
    final ctx = buildContext ?? navigatorKey.currentContext;
    assert(ctx != null, "Navigator context cannot be null");
    ctx!.replace(route, extra: extra);
  }

  static void offAll(
    String route, {
    BuildContext? buildContext,
    Object? extra,
  }) {
    final ctx = buildContext ?? navigatorKey.currentContext;
    assert(ctx != null, "Navigator context cannot be null");
    // 直接用go方法替换整个栈，无需手动pop
    GoRouter.of(ctx!).go(route, extra: extra);
  }

  static void back({BuildContext? buildContext, Object? result}) {
    final ctx = buildContext ?? navigatorKey.currentContext;
    assert(ctx != null, "Navigator context cannot be null");
    try {
      GoRouter.of(ctx!).pop(result);
    } on Exception catch (e) {
      debugPrint(e.toString());
    }
  }
}

3. 统一导航逻辑 #

确保所有导航操作都通过Nav类的方法执行，避免混合使用不同的导航API，保持逻辑一致性。

4. 验证配置兼容性 #

嵌套路由结构下，GoRouter.optionURLReflectsImperativeAPIs = true可以正常工作，若仍有异常可暂时注释该配置测试，确认是否为配置导致的历史同步问题。

测试验证 #

重构后按Dashboard → Page1 → Page2 → Page3顺序导航：

• 应用内返回按钮：依次回退Page3 → Page2 → Page1 → Dashboard，符合预期。
• 浏览器返回按钮：历史记录同步回退，顺序与应用内返回完全一致，无异常跳转。

内容的提问来源于stack exchange，提问作者Anbumani