Flutter中使用GoRouter的ShellRoute时返回按钮不显示问题

核心原因 #

你的问题根源在于ShellRoute嵌套结构下，GoRouter的导航状态与页面组件的同步延迟，在go_router v6.0.9版本中，Shell的上下文和子页面上下文对导航栈的感知存在不同步情况，导致AppBar无法正确判断是否显示返回按钮，同时canPop()的返回值也出现异常。

具体修复步骤 #

1. 手动指定AppBar的返回按钮 #

不要依赖Flutter自动生成的返回按钮，直接在Post页面的AppBar中通过leading属性手动控制：

AppBar(
  leading: context.canPop()
      ? IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () => context.pop(),
        )
      : null,
  title: Text('Post ${state.pathParameters['id']}'),
)

这种方式绕开了框架对栈状态的自动判断，直接用当前页面的上下文状态来控制按钮显示。

2. 修复Shell中canPop()的延迟问题 #

在Shell的didUpdateWidget方法中，通过延迟一帧获取最新的导航状态，避免状态未同步的问题：

@override
void didUpdateWidget(covariant Shell oldWidget) {
  super.didUpdateWidget(oldWidget);
  // 延迟一帧获取最新的导航栈状态
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final canPop = GoRouter.of(context).canPop();
    print('Shell canPop: $canPop');
  });
}

3. 检查路由配置的嵌套逻辑 #

确保ShellRoute的子路由结构正确，Home作为Shell的直接子路由，Post作为Home的子路由：

final router = GoRouter(
  initialLocation: '/',
  routes: [
    ShellRoute(
      builder: (context, state, child) {
        return Scaffold(
          body: child,
          // 这里可以放置全局导航栏等Shell层内容
        );
      },
      routes: [
        GoRoute(
          path: '/',
          builder: (context, state) => const HomePage(),
          routes: [
            GoRoute(
              path: 'post/:id',
              builder: (context, state) => PostPage(id: state.pathParameters['id']!),
            ),
          ],
        ),
      ],
    ),
  ],
);

4. 升级go_router版本（推荐） #

你当前使用的v6.0.9存在不少导航状态同步的bug，升级到v6.5.0及以上版本能从根源上解决这类问题，执行升级命令：

flutter pub upgrade go_router

补充说明 #

热重载后canPop()变为true是因为热重载强制刷新了上下文状态，但AppBar的返回按钮需要在页面初始化时就正确感知栈状态，所以手动指定leading是最直接的临时解决方案；同级路由无效是因为GoRouter对ShellRoute和普通GoRoute的栈管理逻辑不同，嵌套路由必须遵循Shell->父路由->子路由的层级结构。

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