GoRouter路由问题：从PostListPage打开帖子返回路径错误怎么解决？

问题分析 #

你的路由结构中，PostListPage是HomePage的子路由，而post/:id仅挂载在HomePage下：

• 用GoRouter.go("/post/:id")从PostListPage打开帖子时，会替换栈顶的PostListPage，导致返回直接回到HomePage
• 用push时，相对路径会生成/posts/post/:id（不存在的路由），Web端刷新后会回到首页；开启官方不推荐的optionURLReflectsImperativeAPIs又有潜在风险

最优解决方案：将帖子路由设为顶级路由 #

调整路由结构，把post/:id提升为顶级路由，这样无论从哪个页面导航，都能保证URL统一且栈结构正确。

修改后的路由代码 #

GoRouter(
  routes: [
    GoRoute(
      path: "/",
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: "/posts",
      builder: (context, state) => PostListPage(),
    ),
    GoRoute(
      path: "/post/:id",
      builder: (context, state) => PostPage(id: state.pathParameters["id"]!),
    ),
  ],
);

导航方式 #

在HomePage和PostListPage中，统一使用push方法打开帖子：

// 从HomePage打开帖子
GoRouter.of(context).push("/post/$postId");

// 从PostListPage打开帖子
GoRouter.of(context).push("/post/$postId");

这种方式的优势：

• 返回逻辑正确：从HomePage打开的帖子返回至HomePage，从PostListPage打开的返回至PostListPage
• Web端URL同步：刷新/post/:id时，能直接加载帖子页面，不会跳回首页
• 符合官方路由设计规范，无需开启风险选项

备选方案：为PostListPage添加独立的帖子子路由 #

如果不想调整顶级路由结构，可以给PostListPage也添加一个post/:id子路由，保证嵌套URL能匹配到有效路由。

修改后的路由代码 #

GoRouter(
  routes: [
    GoRoute(
      path: "/",
      builder: (context, state) => HomePage(),
      routes: [
        GoRoute(
          path: "post/:id",
          builder: (context, state) => PostPage(id: state.pathParameters["id"]!),
        ),
        GoRoute(
          path: "posts",
          builder: (context, state) => PostListPage(),
          routes: [
            // 为PostListPage添加帖子子路由
            GoRoute(
              path: "post/:id",
              builder: (context, state) => PostPage(id: state.pathParameters["id"]!),
            ),
          ],
        ),
      ],
    ),
  ],
);

导航方式 #

使用相对路径进行导航：

// HomePage中导航
GoRouter.of(context).push("post/$postId");

// PostListPage中导航
GoRouter.of(context).push("post/$postId");

这种方式的缺点是会生成两种URL（/post/:id和/posts/post/:id）指向同一个页面，适合对URL结构要求不高的场景。

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