Flutter中ModalRoute.withName在pushNamedAndRemoveUntil中不生效

问题描述 #

我被该问题困扰多日未找到解决方案，特此发起技术问询。
在应用的某个业务场景中，我需要从导航栈弹出2个路由后推入新路由。经调研确认pushNamedAndRemoveUntil是最优实现方案：该方法可通过传入ModalRoute.withName('/<route_name>')指定路由移除边界，导航栈会持续弹出路由直到匹配到指定名称的路由后停止，再推入目标新路由。
我最初使用的调用代码如下：

Navigator.of(context).pushNamedAndRemoveUntil('/raceadmin_reporting', ModalRoute.withName('/raceadmin_page'));

但实际运行时该代码未达预期：无论传入什么路由名称，pushNamedAndRemoveUntil都会弹出栈内所有路由，我据此推测ModalRoute.withName始终未返回true。我也尝试过如下写法，依然无效：

Navigator.of(context).pushNamedAndRemoveUntil('/raceadmin_reporting', (route) => route == RaceAdminPage.route());

通过调试器查看导航栈状态，可确认我要作为停止边界的RaceAdmin页面确实存在于栈中。我在RaceAdmin类中定义了static const routeName = '/raceadmin_page';，但即便在ModalRoute.withName中传入对应路由名（我也尝试过传入/raceadmin_name），功能依然不生效。

相关代码 #

我的路由统一在routes.dart文件中定义，generateRoute方法代码如下：

static Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case '/':
      return MaterialPageRoute(builder: (context) => RailMeatApp());
    case '/raceadmin_page':
      return MaterialPageRoute(builder: (context) => const RaceAdminPage());
    case '/raceadmin_pendinglist':
      return MaterialPageRoute(builder: (context) => PendingResultsList());
    case '/raceadmin_pendingresults':
      final args = settings.arguments as Map<String?, String?>;
      return MaterialPageRoute(
          builder: (context) => PendingResultsPage(
                raceId: args['raceId'] as String,
              ));
    case '/raceadmin_reporting':
      return MaterialPageRoute(builder: (context) => RaceAdminReporting());
    default:
      return _errorRoute();
  }
}

MaterialApp的初始化配置代码如下：

return MaterialApp(
  navigatorKey: _navigatorKey,
  home: _railmeatHome(),
  onGenerateRoute: RailmeatRoutes.generateRoute,
);

调试线索 #

通过Flutter调试器查看MaterialApp组件状态时，可观察到导航栈的_history属性共有4条记录；点开任意_history条目查看路由属性可看到，路由_settings下的name属性为null。我猜测这是ModalRoute.withName无法匹配到目标路由的原因，但不确定该判断是否准确，想咨询需要做哪些调整才能让pushNamedAndRemoveUntil正常工作。

解决方案 #

你的判断没错，路由_settings.name全部为null就是ModalRoute.withName匹配失效的核心原因，问题出在你的MaterialApp初始化配置上：

• 你同时配置了home属性和onGenerateRoute属性：home指定的初始组件、以及后续通过Navigator.push直接传入MaterialPageRoute的非命名路由跳转，都不会经过onGenerateRoute逻辑，生成的路由实例自然不会携带你配置的路由名，ModalRoute.withName拿不到匹配的名称，就会一直弹栈直到根路由。
• 你尝试的(route) => route == RaceAdminPage.route()写法无效也很正常：MaterialPageRoute每次调用生成都是全新的实例，直接做对象相等判断永远返回false。

修复方法 #

优先选择第一种方案，从根源解决问题：

1. 移除MaterialApp中的home配置项，改用initialRoute指定初始路由路径，保证所有路由都经过onGenerateRoute生成，自动携带正确的路由名：

return MaterialApp(
  navigatorKey: _navigatorKey,
  // 删除原home属性，改用initialRoute指定初始页
  initialRoute: '/',
  onGenerateRoute: RailmeatRoutes.generateRoute,
);

2. 后续所有页面跳转统一使用命名路由方法（pushNamed、pushNamedAndRemoveUntil等），不要直接用Navigator.push手动构造MaterialPageRoute跳转，避免生成无名称的路由实例。

如果暂时不想重构已有跳转逻辑，也可以直接修改路由移除的判断条件，不依赖路由名匹配，直接判断路由对应的组件类型即可：

Navigator.of(context).pushNamedAndRemoveUntil(
  '/raceadmin_reporting',
  // 同时兼容命名路由和非命名路由场景
  (route) {
    if (route.settings.name == '/raceadmin_page') return true;
    if (route is MaterialPageRoute) {
      // 判断路由对应的组件类型
      return route.builder(navigatorKey.currentContext!) is RaceAdminPage;
    }
    return false;
  }
);

不推荐第二种临时方案，后续维护路由时容易漏改，统一命名路由的方式长期维护成本更低。

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