如何在ShellRoute中跳转子路由？GoRouter路径匹配失败问题

核心原因：跳转路径不匹配 #

你遇到的[GoRouter] No initial matches: details错误，本质是跳转时误用了相对路径作为绝对路径访问。假设你的AppRoutes定义类似：

class AppRoutes {
  static const home = '/home';
  static const homeDetails = 'details';
}

当调用context.go(AppRoutes.homeDetails)时，GoRouter会尝试查找根路径/details，但你的路由配置里只有嵌套在/home下的details子路由，自然找不到匹配项。

解决方案1：使用完整绝对路径跳转 #

直接拼接父路由与子路由的完整路径：

context.go('${AppRoutes.home}/${AppRoutes.homeDetails}');
// 或直接写死完整路径
context.go('/home/details');

解决方案2：使用相对路径跳转 #

如果当前页面已经在/home路由下，可通过相对路径跳转（注意路径前的.）：

context.go('./${AppRoutes.homeDetails}');

额外优化：修正parentNavigatorKey配置 #

你的路由配置中parentNavigatorKey的设置存在逻辑问题，调整后能避免后续导航异常：

• ShellRoute的直接子路由（home/profile/settings）需将parentNavigatorKey设为根导航器_rootNavigatorKey，保证底部导航栏的切换在Shell容器中生效；
• 嵌套子路由（homeDetails/profileDetails）无需设置parentNavigatorKey，默认会继承父路由的Shell导航器，跳转后底部导航栏会保留。

修正后的核心路由代码：

static final GoRouter router = GoRouter(
  initialLocation: AppRoutes.home,
  debugLogDiagnostics: true,
  navigatorKey: _rootNavigatorKey,
  routes: [
    ShellRoute(
      navigatorKey: _shellNavigatorKey,
      builder: (context, state, child) {
        return BlocProvider(
          create: (context) => NavigationCubit(),
          child: MainScreen(child: child),
        );
      },
      routes: [
        GoRoute(
          parentNavigatorKey: _rootNavigatorKey,
          path: AppRoutes.home,
          pageBuilder: (context, state) => const NoTransitionPage(
            child: HomeScreen(),
          ),
          routes: [
            GoRoute(
              path: AppRoutes.homeDetails,
              builder: (context, state) => const HomeDetailsScreen(),
            ),
          ],
        ),
        GoRoute(
          parentNavigatorKey: _rootNavigatorKey,
          path: AppRoutes.profile,
          pageBuilder: (context, state) => const NoTransitionPage(
            child: ProfileScreen(),
          ),
          routes: [
            GoRoute(
              path: AppRoutes.profileDetails,
              builder: (context, state) => const ProfileDetailsScreen(),
            ),
          ],
        ),
        GoRoute(
          parentNavigatorKey: _rootNavigatorKey,
          path: AppRoutes.settings,
          pageBuilder: (context, state) => const NoTransitionPage(
            child: SettingsScreen(),
          ),
        ),
      ],
    ),
  ],
  errorBuilder: (context, state) => const ErrorScreen(),
);

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