如何在Widget中使用GoRouter实现弹窗内的独立导航？

问题描述 #

我希望在弹窗内部实现导航功能，过去仅使用Navigator Widget来实现该需求：

@override
  Widget build(BuildContext context) {
    return  Navigator(
        key: _navigatorKey,
        initialRoute: routeHome,
        onGenerateRoute: _onGenerateRoute,
    );
  }

但现在切换为使用go_router，请问是否有办法通过go_router实现相同的效果，即在弹窗内实现独立导航？

实现方案 #

GoRouter支持创建多个独立实例，只要给每个实例分配专属的NavigatorKey，就能在弹窗这类独立容器内实现隔离的导航逻辑，具体步骤如下：

1. 定义弹窗专属的GoRouter实例 #

创建一个独立的GoRouter，配置弹窗内部的路由规则、初始页面和导航Key：

final _popupNavigatorKey = GlobalKey<NavigatorState>();

final popupRouter = GoRouter(
  navigatorKey: _popupNavigatorKey,
  initialLocation: '/popup-home',
  routes: [
    GoRoute(
      path: '/popup-home',
      builder: (context, state) => const PopupHomePage(),
    ),
    GoRoute(
      path: '/popup-detail',
      builder: (context, state) => const PopupDetailPage(),
    ),
    // 可添加更多弹窗内部路由
  ],
);

2. 在弹窗中挂载独立Router #

弹窗的内容区域直接使用Router Widget，传入刚才定义的弹窗路由实例：

showDialog(
  context: context,
  builder: (context) => Dialog(
    child: SizedBox(
      width: MediaQuery.of(context).size.width * 0.8,
      height: MediaQuery.of(context).size.height * 0.6,
      // 挂载弹窗专属路由
      child: Router(routerDelegate: popupRouter.routerDelegate),
    ),
  ),
);

3. 弹窗内部页面的导航操作 #

在弹窗的页面组件中，直接使用GoRouter的标准导航方法（context.go/context.push等），此时的context会自动关联到弹窗的独立路由实例：

// 在PopupHomePage中触发跳转
ElevatedButton(
  onPressed: () => context.push('/popup-detail'),
  child: const Text('跳转至弹窗详情页'),
);

注意事项 #

• 每个独立弹窗建议创建专属的GoRouter实例，避免不同弹窗的路由逻辑冲突
• 弹窗关闭后，若路由实例是全局创建的，可根据需求决定是否销毁，防止内存泄漏
• 如果需要更复杂的嵌套导航场景，也可以结合ShellRoute实现，但对于临时弹窗来说，独立GoRouter实例的方案更轻量直接

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