GoRouter页面刷新后返回按钮丢失，如何基于路由推断导航栈？

直接访问/detail时没有返回按钮，是因为GoRouter此时的导航栈里只有详情页这一个页面，默认AppBar不会生成返回按钮。以下两种方案可以解决这个问题：

方案1：改用嵌套路由配置 #

把详情页路由作为首页路由的子路由，GoRouter处理/detail路径时会自动将首页加入导航栈，AppBar就能自动显示返回按钮。

修改后的路由代码：

routes: [
  GoRoute(
    name: "home",
    path: "/",
    builder: (context, state) => HomePage(),
    routes: [
      GoRoute(
        name: "detail",
        path: "detail", // 这里不用加斜杠，父路由是"/"，完整路径自动拼接为"/detail"
        builder: (context, state) => DetailPage(),
      ),
    ],
  ),
],

这样不管是从首页跳转过来，还是直接刷新/detail，导航栈里都会同时存在首页和详情页，返回按钮会正常显示，点击后回到首页。

方案2：手动添加返回按钮 #

如果不想调整路由结构，可以在详情页的AppBar里手动加返回按钮，同时兼顾两种场景（从首页跳转来的可以pop，直接访问的则跳转回首页）：

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("详情页"),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () {
            // 先判断能不能pop，能的话就返回上一页，否则直接跳首页
            if (Navigator.of(context).canPop()) {
              Navigator.pop(context);
            } else {
              context.go('/');
            }
          },
        ),
      ),
      // 页面内容
      body: const Center(child: Text("详情页内容")),
    );
  }
}

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