如何在 Flutter 中使用 go router 正确处理路由

Question

我在 Flutter 上使用 go router。我想知道如何以干净的方式处理应用程序中的路线路径。 我认为我在 YouTube 和网站上看到的内容并不那么干净。

他们放置了路线或枚举了路线，但它很快就变得难以消化。

就我而言，我这样做：

   class Route {
      final String path;
      final String fullPath;

  const Route({
    required this.path,
    required this.fullPath,
  });
   }

其中路径是本地路径，完整路径是相对路径。 所以当我像这样叠瓦状时：

    GoRoute(
      path: AppRoutes.a.path,
      pageBuilder: (context, state) => const NoTransitionPage(
        child: A(),
      ),
      routes: [
      GoRoute(
      path: AppRoutes.b.path,
      pageBuilder: (context, state) => const NoTransitionPage(
        child: B(),
      ),
    );
      ],
    );

a.path = '/a'
a.fullPath = '/a'
b.path : '/b'
b.fullPath = '${a.fullPath}/${b.path}/

我像这样进入屏幕b：

    context.push(AppRoutes.b.fullPath)

但是，我不喜欢我的方式。

您有什么让它更干净的建议吗？ 祝你有美好的一天

我看到了一些自动路由的软件包，但我虽然很多，但我仍然认为我可以使用这样的东西。

Answer 1

您可以通过使用命名路由而不是完整路径来改进路由处理。这将使您的代码更易于维护和更清晰，尤其是随着您的应用程序的增长。

首先，修改

Route

类以包含

name

字段：

class Route {
  final String name; // Unique name for the route
  final String path; // Path used in GoRouter

  const Route({
    required this.name,
    required this.path,
  });
}

现在，更新您的

AppRoutes

以定义命名路由：

class AppRoutes {
  AppRoutes._(); // Private constructor to prevent instantiation

  static const a = Route(name: 'a', path: '/a');
  static const b = Route(name: 'b', path: '/b');
}

您的

GoRouter

配置现在如下所示：

GoRoute(
  name: AppRoutes.a.name, // Named route for easier navigation
  path: AppRoutes.a.path,
  pageBuilder: (context, state) => const NoTransitionPage(
    child: A(),
  ),
  routes: [
    GoRoute(
      name: AppRoutes.b.name, // Named route for nested navigation
      path: AppRoutes.b.path,
      pageBuilder: (context, state) => const NoTransitionPage(
        child: B(),
      ),
    ),
  ],
)

最后，您可以使用路线名称而不是完整路径导航到屏幕

B

：

context.goNamed(AppRoutes.b.name);