小能豆

如何在flutter中使用AutoRoute处理深度链接?

dart

我正在尝试使用 autoRoute 包处理深层链接,如何在打开 url 时使深层链接正常工作?

这是我的深层链接处理程序代码

MaterialApp.router(
        title: 'Flutter Demo',
        routerConfig: _appRouter.config(
          navigatorObservers: () => [AutoRouteObserver()],
    deepLinkBuilder: (link) {
            print(link.path);
            if(link.path.startsWith('/ru/reset-password')) {
              return const DeepLink(
                [ResetPassRoute()]
              );
            } else {
              return DeepLink.defaultPath;
            }
    }
        ),
      ),


/// route config 
@AutoRouterConfig()
class AppRouter extends _$AppRouter {
  @override
  List<AutoRoute> get routes => [
        AutoRoute(page: MainRoute.page, initial: true, children: [
          AutoRoute(page: HomeRoute.page),
          AutoRoute(page: HelpRoute.page),
          AutoRoute(page: AboutRoute.page),
          AutoRoute(page: ContactsRoute.page),
          AutoRoute(page: ConfidenceRoute.page),
          AutoRoute(page: TermsRoute.page),
          AutoRoute(page: FavoriteRoute.page),
          AutoRoute(page: CreateRoute.page),
          AutoRoute(page: MessageRoute.page),
          AutoRoute(page: ProfileRoute.page),
          AutoRoute(page: RegistrationRoute.page),
        ]),
        AutoRoute(page: RegistrationRoute.page),
        AutoRoute(page: ResetPassRoute.page),
      ];
}

当我打开我的网址时my-url/ru/reset-password没有任何反应,我该如何修复它?


阅读 197

收藏
2024-02-23

共1个答案

小能豆

要确保在打开链接时使深层链接正常工作,您需要在应用程序的入口处设置路由,以便正确解析和处理深层链接。

根据您提供的代码,您已经在MaterialApp.router()中设置了routerConfig,并在routerConfig中配置了deepLinkBuilder。但是,在您提供的代码中,缺少实际的路由配置和入口点。

为了修复这个问题,您需要做以下几步:

  1. 确保您已正确设置了路由配置和入口点。在您提供的代码中,您需要在AppRouter类中定义路由,然后将其作为routerConfig的参数传递给MaterialApp.router()
  2. 在路由配置中正确处理深层链接。根据您提供的deepLinkBuilder代码,似乎已经处理了/ru/reset-password路径。确保您的深层链接构建器返回正确的路由路径或页面。
  3. 确保您的深层链接格式正确。例如,如果您要打开/ru/reset-password路径,确保您在URL中正确地设置了此路径。您可以尝试手动输入URL来测试。

以下是一个修复了上述问题的示例代码:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final AppRouter _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      routerDelegate: _appRouter.delegate(),
      routeInformationParser: _appRouter.defaultRouteParser(),
      routerConfig: _appRouter.config(
        navigatorObservers: () => [AutoRouteObserver()],
        deepLinkBuilder: (link) {
          print(link.path);
          if (link.path.startsWith('/ru/reset-password')) {
            return const DeepLink([ResetPassRoute()]);
          } else {
            return DeepLink.defaultPath;
          }
        },
      ),
    );
  }
}

@MaterialAutoRouter()
class AppRouter extends $AppRouter {
  @override
  List<AutoRoute> get routes => [
        AutoRoute(page: MainRoute, initial: true, children: [
          AutoRoute(page: HomeRoute),
          AutoRoute(page: HelpRoute),
          AutoRoute(page: AboutRoute),
          AutoRoute(page: ContactsRoute),
          AutoRoute(page: ConfidenceRoute),
          AutoRoute(page: TermsRoute),
          AutoRoute(page: FavoriteRoute),
          AutoRoute(page: CreateRoute),
          AutoRoute(page: MessageRoute),
          AutoRoute(page: ProfileRoute),
          AutoRoute(page: RegistrationRoute),
        ]),
        AutoRoute(page: RegistrationRoute),
        AutoRoute(page: ResetPassRoute),
      ];
}

在这个修复后的代码中,我们将AppRouter类作为应用程序的入口点,并将其与MaterialApp.router()中的routerDelegaterouteInformationParser一起使用。同时,我们确保AppRouter类中包含了正确的路由配置。最后,我们还确保在routerConfig中正确处理了深层链接。请确保将ResetPassRoute和其他路由替换为您实际的路由类。

2024-02-23