Go路由器：使用GoRoute和ShellRoute

Question

使用 GoRoute 和 ShellRoute 处理路由的最佳方法是什么？

我有3个屏幕。设置 - 显示全屏 A - 显示底部导航（用带壳路由包裹） B - 显示底部导航（用带壳路由包裹）

我在此配置中遇到的唯一问题是当我进入“设置”屏幕时缺少后退按钮。我该如何修复它？

final goRouter = GoRouter(
  initialLocation: '/a',
  navigatorKey: _rootNavigatorKey,
  routes: [
    GoRoute( // = Do not show Bottom Navigation, just a full screen
      path: '/settings',
      pageBuilder: (context, state) => const NoTransitionPage(
        child: SettingsPage(),
      ),
    ),
    ShellRoute( // ShellRoute = Show Bottom Navigation
      navigatorKey: _shellNavigatorKey,
      builder: (context, state, child) {
        return ScaffoldWithBottomNavigation(
          tabs: tabs,
          child: child,
        );
      },
      routes: [
        GoRoute( 
          path: '/a',
          pageBuilder: (context, state) => const NoTransitionPage(
            child: HomeScreen(label: 'A', detailsPath: '/a/details'),
          ),
          routes: [
            GoRoute(
              path: 'details',
              builder: (context, state) => const DetailsScreen(label: 'A'),
            ),
          ],
        ),
        GoRoute(
          path: '/b',
          pageBuilder: (context, state) => const NoTransitionPage(
            child: HomeScreen(label: 'B', detailsPath: '/b/details'),
          ),
          routes: [
            GoRoute(
              path: 'details',
              builder: (context, state) => const DetailsScreen(label: 'B'),
            ),
          ],
        ),
      ],
    ),
  ],
);

Answer 1

呈现代码中的错误。

1. 使用 ofcontext.go('/someRoute')将页面推入堆栈
2. 不使用parentNavigatorKeyGoRoute 的 prop。

可能的解决方案：

1. 用于context.push('/someRoute')将页面压入堆栈，然后才能在压入的页面中看到后退按钮。

2. 使用parentNavigatorKey每个属性route并明确指定当前位置GoRoute。

   • 如果页面是以下的子页面ShellRoute：parentNavigatorKey:_shellNavigatorKey
   • 如果页面是以下的子页面MainRoute：parentNavigatorKey:_rootNavigatorKey

更新settings路线：

GoRoute( 
      parentNavigatorKey:_rootNavigatorKey       Specify explicity that settings page lies in the Main Route 
      path: '/settings',
      pageBuilder: (context, state) => const NoTransitionPage(
        child: SettingsPage(),
      ),
    ),

bottomNavigationBar现在您将摆脱ShellRoute.

请参阅此处ShellRoute使用和底部导航栏的详细代码和说明GoRouter