Flutter GoRouter：功能开发页面返回上一路由失败求助

方案1：使用push() + pop()（推荐） #

这是最符合路由栈常规逻辑的方案，直接利用GoRouter的栈管理实现返回。

修改跳转调用 #

将调用处的context.go()替换为context.push()，这样会把当前页面保留在路由栈中：

// GoalsPageBodyGoals组件中的跳转代码
AppButtons.textButton(
  onPressed: () => context.push('/coming-soon'),
  phosphorIcon: PhosphorIcons.arrowRight,
  child: Text(context.l10n.goalsListTextLink),
),

修改路由定义（router.dart） #

移除路由中的previousRoute参数，简化路由配置：

GoRoute(
  path: '/coming-soon',
  pageBuilder: (context, state) {
    return MaterialPage(
      key: ValueKey('coming-soon'),
      child: const AppComingSoon(),
    );
  },
),

修改AppComingSoon组件 #

去掉previousRoute参数，返回按钮直接调用context.pop()回到上一页：

class AppComingSoon extends StatelessWidget {
  const AppComingSoon({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        titleSpacing: 4,
        leading: IconButton(
          icon: const Icon(PhosphorIcons.arrowLeft),
          onPressed: () {
            context.pop();
          },
        ),
        elevation: 0,
        title: Text(context.l10n.buttonBack),
      ),
      body: Column(
        children: [
          Container(
            width: SizeConfig.screenWidth,
            height: SizeConfig.screenHeight * 0.55,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: Image.asset(
                  'assets/Graphics/coming-soon.png',
                ).image,
                fit: BoxFit.fill,
                alignment: Alignment.topCenter,
              ),
            ),
          ),
          SizedBox(
            height: getProportionateScreenWidth(16),
          ),
          Padding(
            padding: EdgeInsets.only(
              left: getProportionateScreenWidth(20),
              right: getProportionateScreenWidth(20),
            ),
            child: Column(
              children: [
                Text(
                  "implementing this feature in the app.",
                  style: Theme.of(context).textTheme.substitleSemiBold,
                  textAlign: TextAlign.center,
                ),
                SizedBox(
                  height: getProportionateScreenWidth(16),
                ),
                Text(
                  "If you need support with this topic",
                  style: Theme.of(context).textTheme.body1Regular,
                  textAlign: TextAlign.center,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

为什么之前的方法失效？ #

context.go()会替换当前路由栈的顶部条目，跳转后栈中仅保留/coming-soon页面，因此navigator.pop()没有上一页可以返回。而context.push()是将新页面添加到路由栈顶部，保留之前的页面，所以pop()能正常回到上一页。

方案2：传递当前路由作为查询参数（特殊场景用） #

如果必须使用go()跳转（比如需要清理路由栈的场景），可以通过查询参数传递上一页路由。

修改跳转调用 #

获取当前页面的完整路由路径，作为查询参数传递：

AppButtons.textButton(
  onPressed: () {
    final currentRoute = GoRouterState.of(context).fullPath ?? '/';
    context.go('/coming-soon?previousRoute=$currentRoute');
  },
  phosphorIcon: PhosphorIcons.arrowRight,
  child: Text(context.l10n.goalsListTextLink),
),

修改路由定义（router.dart） #

从查询参数中获取上一页路由：

GoRoute(
  path: '/coming-soon',
  pageBuilder: (context, state) {
    final previousRoute = state.queryParams['previousRoute'];
    return MaterialPage(
      key: ValueKey('coming-soon'),
      child: AppComingSoon(previousRoute: previousRoute),
    );
  },
),

修改AppComingSoon组件 #

通过查询参数跳转回上一页，添加默认 fallback：

class AppComingSoon extends StatelessWidget {
  final String? previousRoute;

  const AppComingSoon({Key? key, this.previousRoute}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        titleSpacing: 4,
        leading: IconButton(
          icon: const Icon(PhosphorIcons.arrowLeft),
          onPressed: () {
            if (previousRoute != null) {
              context.go(previousRoute!);
            } else {
              context.go('/');
            }
          },
        ),
        elevation: 0,
        title: Text(context.l10n.buttonBack),
      ),
      // body代码保持不变
    );
  }
}

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