Flutter web + go_router，直接访问：/page，如何回到/(root)

Question

我正在使用 go_router 并获得了这样的配置：

final router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(path: '/', pageBuilder: (context, state) => const MaterialPage(child: MyHomePage(title: 'Flutter Demo Home Page')),),
    GoRoute(path: '/second', pageBuilder: (context, state) => const MaterialPage(child: MyHomePage(title: 'Second !')),),
  ],
);

当我直接访问网页时使用：/second 页面正确打开，但无法返回到：/（应用程序栏中没有后退箭头）。

如果我转到/，然后通过context.push("/second");打开/second页面，那么自然会出现后退箭头。

当我直接在浏览器中输入URI时，如何确保应用栏后退箭头让我转到初始页面？

完整示例：

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(const MyApp());
}

final router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(path: '/', pageBuilder: (context, state) => const MaterialPage(child: MyHomePage(title: 'Flutter Demo Home Page')),),
    GoRoute(path: '/second', pageBuilder: (context, state) => const MaterialPage(child: MyHomePage(title: 'Second !')),),
  ],
);

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routerConfig: router,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.push("/second");
        },
        tooltip: 'Navigate',
        child: const Icon(Icons.navigate_next),
      ),
    );
  }
}

Answer 1

要从应用栏的任何位置返回根目录，请使用以下命令：

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context, rootNavigator: true).pushAndRemoveUntil(
            MaterialPageRoute(
                builder: (context) => const  MyHomePage(title: 'Flutter Demo Home Page')),
            (route) => true);
        },
        tooltip: 'Navigate',
        child: const Icon(Icons.navigate_next),
      ),
    );
  }
}

您可以使用此代码来支持 root：

  Navigator.of(context, rootNavigator: true).pushAndRemoveUntil(
            MaterialPageRoute(
                builder: (context) => const  MyHomePage(title: 'Flutter Demo Home Page')),
            (route) => true);