Flutter Navigator 2.0浏览器回退不触发parseRouteInformation且报GlobalKey重复错

问题根因梳理 #

1. GlobalKey重复报错原因 #

你实例化AppRouterDelegate的时机不对，如果在build方法中每次都新建AppRouterDelegate实例，每次构造都会生成新的GlobalKey<NavigatorState>，旧的Key还未从组件树销毁就插入新的Key，就会触发重复Key报错；另外如果在MaterialApp.router外层额外嵌套了Navigator/普通MaterialApp，也会出现Key冲突。

2. 浏览器前进后退不触发路由解析、需要两次回退的核心原因 #

你RouterDelegate的Navigator的pages数组永远只有一个MaterialPage，Navigator 2.0的pages数组是完整的路由历史栈快照，你当前的实现是单页内切换内容，不是多栈路由，和浏览器历史栈的同步逻辑完全不匹配：

• 第一次点击回退时，只会触发Navigator的onPopPage把selectedPage设为null，页面内容切换为默认值，但地址栏不会同步更新
• 第二次点击回退才会触发系统级的路由回退，所以需要点击两次才会看到地址栏变化
• 点击前进后退时系统判定路由栈没有变化，就不会调用parseRouteInformation方法

3. 手动输入地址报错原因 #

如果你配置了MaterialApp.router的initialRoute参数，会覆盖系统默认的路由解析逻辑，导致手动输入的地址无法被正确解析，直接 fallback 到根路由。

修复方案 #

第一步：解决GlobalKey重复问题 #

全局只实例化一次AppRouterDelegate和AppRouteInformationParser，不要在build方法中重复创建：

// 提前全局/State初始化，只创建一次
final AppRouterDelegate _routerDelegate = AppRouterDelegate();
final AppRouteInformationParser _routeParser = AppRouteInformationParser();

// 传入MaterialApp.router
Widget build(BuildContext context) {
  return MaterialApp.router(
    routerDelegate: _routerDelegate,
    routeInformationParser: _routeParser,
    // 不要设置initialRoute参数
    // 其他配置
  );
}

同时删除AppRouterDelegate外层嵌套的多余Navigator组件。

第二步：修复回退逻辑，解决两次回退问题 #

你是单页面切换内容的场景，不需要PopNavigatorRouterDelegateMixin的默认pop逻辑，自行接管回退事件即可：

1. 去掉AppRouterDelegate的PopNavigatorRouterDelegateMixin依赖
2. 重写popRoute方法处理回退逻辑：

class AppRouterDelegate extends RouterDelegate<RoutePath>
    with ChangeNotifier {
  // 原有代码保持不变

  @override
  Future<bool> popRoute() async {
    if (appState.selectedPage != null && appState.selectedPage != '/') {
      appState.selectedPage = '/';
      notifyListeners();
      return true;
    }
    // 返回false交给系统处理退出应用逻辑
    return false;
  }

  @override
  Widget build(BuildContext context) {
    print("Delegate build");
    return Navigator(
        key: navigatorKey,
        pages: [
          MaterialPage(
              child: WebsitePageDisplay(
            appState: appState,
          ))
        ],
        // 禁用默认onPopPage逻辑
        onPopPage: (route, result) => false,
        );
  }
}

第三步：清理无用逻辑 #

删除AppState中selectedWidget get方法里永远不会执行的notifyListeners()：

Widget get selectedWidget {
  switch (selectedPage) {
    case CyclistsLandingRoute:
      return CyclistLanding();
    case RetailersLandingRoute:
      return RetailerLanding();
    case MapRoute:
      return CityMap();
    case AboutRoute:
      return AboutUs();
    case TermsOfServiceRoute:
      return TermsOfService();
    case PrivacyPolicyRoute:
      return PrivacyPolicy();
    case CommunityGuidelinesRoute:
      return CommunityGuidelines();
    case LegalNoticeRoute:
      return LegalNotice();
    default:
      return CyclistLanding();
  }
}

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