如何在GoRouter的Shell Route中通过相对路径跳转至详情页？

方案1：直接使用相对路径（推荐） #

GoRouter原生支持相对路径跳转，你只需要去掉路径开头的斜杠，直接调用：

context.go('details');

当当前处于/a路径时，这个调用会自动拼接成/a/details；处于/b时则会拼接成/b/details，完全符合需求。

方案2：封装工具函数兼容带斜杠的输入 #

如果一定要传入/details这种带开头斜杠的路径，可以封装一个工具函数自动拼接当前路径：

// 给BuildContext扩展相对跳转方法
extension GoRouterRelative on BuildContext {
  void goRelative(String path) {
    final currentLocation = GoRouterState.of(this).location;
    // 去除路径开头的斜杠，避免出现//的无效路径
    final cleanPath = path.startsWith('/') ? path.substring(1) : path;
    go('$currentLocation/$cleanPath');
  }
}

调用方式：

context.goRelative('/details');

方案3：使用命名路由（更优雅） #

给子路由添加name属性，通过命名路由跳转，无需关心当前路径：

// 修改路由配置，给详情页路由添加name
final goRouter = GoRouter(
  initialLocation: '/a',
  navigatorKey: _rootNavigatorKey,
  routes: [
    ShellRoute(
      navigatorKey: _shellNavigatorKey,
      builder: (context, state, child) {
        return ScaffoldWithBottomNavBar(child: child);
      },
      routes: [
        GoRoute(
          path: '/a',
          pageBuilder: (context, state) => NoTransitionPage(
            child: const RootScreen(label: 'A'),
          ),
          routes: [
            GoRoute(
              name: 'details', // 添加命名
              path: 'details',
              builder: (context, state) => const DetailsScreen(label: 'A'),
            ),
          ],
        ),
        GoRoute(
          path: '/b',
          pageBuilder: (context, state) => NoTransitionPage(
            child: const RootScreen(label: 'B'),
          ),
          routes: [
            GoRoute(
              name: 'details', // 同样添加命名
              path: 'details',
              builder: (context, state) => const DetailsScreen(label: 'B'),
            ),
          ],
        ),
      ],
    ),
  ],
);

跳转时直接调用：

context.goNamed('details');

这种方式无需硬编码路径字符串，在大型项目中更易维护，且会自动匹配当前父路由对应的详情页。

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