Flutter使用go_router：为Shell Route外页面添加BottomNavBar的问题

问题还原 #

• 基于Flutter 3.7.5 + go_router 6.2.0，通过MaterialApp.router配置路由，将A、B、C页面封装在带BottomNavBar的ShellRoute中，初始导航功能正常
• 尝试将非底部导航列表的页面D加入ShellRoute后，底部导航栏虽能显示，但从D页面点击A页面的导航项无响应

原因分析 #

ShellRoute的设计逻辑是为一组同级导航页面提供统一的壳（比如底部导航栏），所有纳入Shell的页面都会共享这个壳，且导航项的跳转逻辑基于Shell内的路由匹配。当把不属于底部导航组的页面D加入后，D页面的路由栈层级和A/B/C不在同一逻辑组，导致点击导航项时无法正确匹配并跳转到A页面。

正确实现方案 #

按照调研结论，非底部导航项的页面不应显示BottomNavBar，应作为模态页面打开，具体步骤：

1. 移除D页面在ShellRoute中的配置，保持ShellRoute仅包含A、B、C三个底部导航页面
2. 将D页面配置为独立路由，通过go_router的context.push('/d')方式打开，此时页面会以模态形式呈现，自带返回按钮，无需底部导航栏

示例代码调整 #

原错误的ShellRoute配置（含D页面）

ShellRoute(
  builder: (context, state, child) {
    return ScaffoldWithBottomNavBar(child: child);
  },
  routes: [
    GoRoute(path: '/a', builder: (context, state) => PageA()),
    GoRoute(path: '/b', builder: (context, state) => PageB()),
    GoRoute(path: '/c', builder: (context, state) => PageC()),
    GoRoute(path: '/d', builder: (context, state) => PageD()), // 错误：不该加在这里
  ],
)

修正后的路由配置

// ShellRoute仅保留底部导航页面
ShellRoute(
  builder: (context, state, child) {
    return ScaffoldWithBottomNavBar(child: child);
  },
  routes: [
    GoRoute(path: '/a', builder: (context, state) => PageA()),
    GoRoute(path: '/b', builder: (context, state) => PageB()),
    GoRoute(path: '/c', builder: (context, state) => PageC()),
  ],
),
// D页面作为独立路由
GoRoute(
  path: '/d',
  builder: (context, state) => PageD(),
),

打开D页面的方式

在任意页面中通过以下代码打开D页面：

context.push('/d');

补充说明 #

ScaffoldWithBottomNavBar的导航逻辑应仅处理Shell内的A/B/C路由跳转，确保每个导航项对应的路由是Shell下的直接子路由，这样点击时才能正确匹配并切换页面。

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