Flutter中go_router的ShellRoute内路由参数无法正常工作

核心问题：子路由路径拼接错误 #

你的ProjectsView的path应为'/projects'，但子路由的path设置成了'projects/:projectTitle'，这会导致完整路由路径变为'/projects/projects/:projectTitle'，和你跳转的'/projects/wishlists'完全不匹配，因此提示路由不存在。

修复步骤 #

1. 修正子路由路径 #

将子路由的path改为':projectTitle'，这样组合后的完整路径就是'/projects/:projectTitle'，和你跳转的路径一致：

GoRoute(
  parentNavigatorKey: rootNavigatorKey,
  path: ':projectTitle', // 修正此处路径
  pageBuilder: (context, state) {
    return FadePageTransition(
      page: ProjectDetailScaffold(
        project: Projects.values.byName(
          state.params['projectTitle']!,
        ),
      ),
    );
  },
),

2. 推荐使用命名路由跳转（更可靠） #

手动拼接路径容易出错，建议给子路由添加name属性，通过名称跳转：

GoRoute(
  name: 'ProjectDetail', // 添加路由名称
  parentNavigatorKey: rootNavigatorKey,
  path: ':projectTitle',
  pageBuilder: (context, state) {
    // 现有代码不变
  },
),

跳转代码改为：

rootNavigatorKey.currentContext!.pushNamed(
  'ProjectDetail',
  params: {'projectTitle': 'wishlists'},
);

3. 确认parentNavigatorKey的使用场景 #

• 若希望ProjectDetailScaffold显示在ShellRoute的ScaffoldView内部，将子路由的parentNavigatorKey改为_shellNavigatorKey；
• 若需要脱离Shell布局（比如全屏展示详情页），则保留rootNavigatorKey，根据实际需求调整即可。

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