Flutter中GoRouter与go_router_builder实现多Tab分支路由复用

提问（翻译自英文） #

我希望在Flutter的Tab分支路由中复用路由。现有如下Tab Shell路由：

@TypedStatefulShellRoute<HomeTabBarScreenRoute>(...)

以及根路径的WebScreenRoute路由：

@TypedGoRoute<WebScreenRoute>(path: '/url')...

我需要同时支持/home/url和/menu/url路径，将WebScreenRoute作为各Tab分支的子路由，但直接添加会导致生成同名类，且TypedGoRoute要求路径以/开头，请问当前GoRouter与go_router_builder是否支持该需求，且无需基于Navigator 2.0的hack方案？

回答 #

GoRouter 配合 go_router_builder 完全支持这种路由复用需求，不需要依赖 Navigator 2.0 的 hack 方案，以下是两种可行的官方合规实现方式：

方案1：复用路由逻辑，为各Tab创建独立注解包装类

核心思路是将Web页面的路由逻辑抽离为基础类，再为每个Tab分支创建独立的TypedGoRoute注解类，共享页面组件和路由逻辑：

1. 定义通用的Web页面和基础路由逻辑（不直接加注解）：

// 通用Web页面组件
class WebScreen extends StatelessWidget {
  final String url;
  const WebScreen({super.key, required this.url});

  @override
  Widget build(BuildContext context) {
    // 页面实现代码
  }
}

// 基础路由逻辑类，复用核心处理逻辑
class WebScreenRoute extends GoRouteData {
  final String url;

  WebScreenRoute({required this.url});

  @override
  Widget build(BuildContext context) => WebScreen(url: url);
}

2. 为每个Tab分支创建独立的注解包装类：

// Home Tab下的Web子路由
@TypedGoRoute<HomeWebScreenRoute>(
  path: 'url', // 子路由路径不加/，自动拼接父路由路径
  parentNavigatorKey: homeTabNavigatorKey,
)
class HomeWebScreenRoute extends WebScreenRoute {
  HomeWebScreenRoute({required super.url});
}

// Menu Tab下的Web子路由
@TypedGoRoute<MenuWebScreenRoute>(
  path: 'url',
  parentNavigatorKey: menuTabNavigatorKey,
)
class MenuWebScreenRoute extends WebScreenRoute {
  MenuWebScreenRoute({required super.url});
}

这种方式生成的代码不会出现类名冲突，同时能匹配/home/url和/menu/url路径，完全复用Web页面的逻辑。

方案2：原生路由配置复用页面组件

如果不想创建多个包装类，可直接在StatefulShellRoute的分支路由中配置共享的Web路由：

final GoRouter router = GoRouter(
  navigatorKey: _rootNavigatorKey,
  initialLocation: '/home',
  routes: [
    StatefulShellRoute.indexedStack(
      builder: (context, state, navigationShell) {
        return HomeTabBarScreen(navigationShell: navigationShell);
      },
      branches: [
        StatefulShellBranch(
          navigatorKey: _homeNavigatorKey,
          routes: [
            GoRoute(
              path: '/home',
              routes: [
                GoRoute(
                  path: 'url',
                  builder: (context, state) {
                    final url = state.queryParameters['url'] ?? '';
                    return WebScreen(url: url);
                  },
                ),
              ],
            ),
          ],
        ),
        StatefulShellBranch(
          navigatorKey: _menuNavigatorKey,
          routes: [
            GoRoute(
              path: '/menu',
              routes: [
                GoRoute(
                  path: 'url',
                  builder: (context, state) {
                    final url = state.queryParameters['url'] ?? '';
                    return WebScreen(url: url);
                  },
                ),
              ],
            ),
          ],
        ),
      ],
    ),
    // 保留根路径的/url路由
    GoRoute(
      path: '/url',
      builder: (context, state) {
        final url = state.queryParameters['url'] ?? '';
        return WebScreen(url: url);
      },
    ),
  ],
);

该方案无需依赖go_router_builder注解，直接通过原生配置实现路由复用，同样支持/home/url、/menu/url和/url三个路径。

关键注意点

• 使用go_router_builder时，子路由的path不要加前缀/，否则会被解析为根路径，无法和父Tab路由拼接；
• 每个Tab分支的子路由需指定对应的parentNavigatorKey，确保路由跳转在Tab的独立Navigator中进行；
• 两种方案均基于GoRouter官方设计实现，无需修改Navigator 2.0底层逻辑。

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