如何在同层级路由中结合ShellRoute与GoRoute实现跳转

问题根源 #

你把ShellRoute和/login的GoRoute设置为同一层级的根路由，使用context.go('/login')跳转时，GoRouter会直接替换整个路由栈，导致原有的ShellRoute被移除，返回时路由栈为空，直接退出应用。

两种解决方案 #

方案1：将/login设为ShellRoute的子路由 #

调整路由结构，把/login页面挂载到ShellRoute的子路由列表中，这样跳转时会在Shell的路由栈之上添加Login页面，返回时自然回到Shell的底部导航页面。

修改后的路由代码示例：

final router = GoRouter(
  routes: [
    ShellRoute(
      builder: (context, state, child) => BottomNavBar(child: child),
      routes: [
        // 原有底部导航页面
        GoRoute(path: '/', builder: (context, state) => HomePage()),
        GoRoute(path: '/discover', builder: (context, state) => DiscoverPage()),
        GoRoute(path: '/shop', builder: (context, state) => ShopPage()),
        // 将/login添加为Shell的子路由
        GoRoute(path: '/login', builder: (context, state) => LoginPage()),
      ],
    ),
  ],
);

跳转Login页面时使用：

context.push('/login');

方案2：保留同层级路由，改用push跳转 #

如果不想调整路由结构，只需将跳转方式从context.go('/login')改为context.push('/login')。push方法会在当前路由栈顶部添加新页面，不会替换原有ShellRoute的路由栈，返回时会回到Shell的页面。

跳转代码修改：

// 原错误写法：context.go('/login');
context.push('/login');

原理说明 #

• context.go()：替换整个路由栈为目标路由，会清除之前的所有路由记录
• context.push()：在当前路由栈顶部添加新路由，保留原有路由记录
• 将/login设为Shell子路由时，Login页面属于Shell路由栈的一部分，跳转时不会破坏底部导航的路由结构

内容的提问来源于stack exchange，提问作者김상현