无法在更改浏览器Url时导航到初始路由错误

Question

我正在更新我的代码以使用Navigator2.0并使导航通过NavigationBar的按钮正常工作，切换页面并相应地更新浏览器Url，当我手动更改它时，它会引发一个错误：

Could not navigate to initial route.
The requested route name was: "/retailers"
There was no corresponding route in the app, and therefore the initial route specified will be ignored and "/" will be used instead.

另外，back按钮不工作，并引发Duplicate GlobalKey detected in widget tree.错误。问题是我在解析器中检查了routeInformation.location吗？

编辑

我试着将开关放入uri.pathSegment.lenght检查中，检查uri.pathSegments.first和back按钮，现在工作正常，仍然抛出Duplicate GlobalKey detected in widget tree.错误。

if (uri.pathSegments.length > 0) {
      print(
          'Uri.segments.first is: ${uri.pathSegments.first}..uri.path is: ${uri.path}');
      // switch (routeInformation.location) {
      switch (uri.pathSegments.first) {
...

这是我的分析者：

class AppRouteInformationParser extends RouteInformationParser<RoutePath> {
  @override
  Future<RoutePath> parseRouteInformation(
      RouteInformation routeInformation) async {
    print(
        'AppRouteInformationParser.parseRouteInformation called for ${routeInformation.location}');
    final Uri uri = Uri.parse(routeInformation.location);
    if (uri.pathSegments.length > 0) {
      print(
          'Uri.segments.first is: ${uri.pathSegments.first}, uri.path is: ${uri.path}');
    } else {
      print('AppRouteInformationParser uri has no segments and is $uri');
    }

    switch (routeInformation.location) {
      // switch (uri.pathSegments.first) {
      case '/':
        print('AppRouteInformationParser.urlSegment switch case : /');
        // return CyclistsPath();
        return HomePath();
      case CyclistsLandingRoute:
        print(
            'AppRouteInformationParser.routeInformation.location switch case: /cyclists');
        return CyclistsPath();
      case '/retailers':
        print(
            'AppRouteInformationParser.routeInformation.location switch case: /retailers');
        return RetailersPath();
      case '/map':
        print(
            'AppRouteInformationParser.routeInformation.location switch case: /map');
        return MapPath();
      case AboutRoute:
        print(
            'AppRouteInformationParser.routeInformation.location switch case: /about');
        return AboutPath();
      case TermsOfServiceRoute:
        print(
            'AppRouteInformationParser.routeInformation.location switch case: /terms-of-service');
        return TermsOfServicePath();
      case PrivacyPolicyRoute:
        print(
            'AppRouteInformationParser.routeInformation.location switch case: /privacy-policy');
        return PrivacyPolicyPath();
      case PrivacySettingsRoute:
        print(
            'AppRouteInformationParser.routeInformation.location switch case: /privacy-settings');
        return PrivacySettingsPath();
      case CommunityGuidelinesRoute:
        print(
            'AppRouteInformationParser.routeInformation.location switch case: /community-guidelines');
        return CommunityGuidelinesPath();
      case LegalNoticeRoute:
        print(
            'AppRouteInformationParser.routeInformation.location switch case: /legal-notice');
        return LegalPath();

      default:
        print(
            '### default AppRouteInformationParser.routeInformation.location switch case ## default: /');
        return HomePath();
    }

  }

  @override
  RouteInformation restoreRouteInformation(RoutePath path) {

    print(
        'AppRouteInformationParser.restoreRouteInformation called for path ${path.selectedPath}');

    switch (path.selectedPath) {
      case '/':
        // case CyclistsLandingRoute:
        print('restoreRouteInformation RouteInformation.location: /');
        return RouteInformation(location: '/');
      case '/cyclists':
        // case CyclistsLandingRoute:
        print('restoreRouteInformation RouteInformation.location: /cyclists');
        return RouteInformation(location: '/cyclists');

      case '/retailers':
        print('restoreRouteInformation RouteInformation.location: /retailers');
        return RouteInformation(location: '/retailers');
      case '/map':
        print('restoreRouteInformation RouteInformation.location: /map');
        return RouteInformation(location: '/map');
      case '/about':
        print('restoreRouteInformation RouteInformation.location: /about');
        return RouteInformation(location: '/about');
      case '/terms-of-service':
        print(
            'restoreRouteInformation RouteInformation.location: /terms-of-service');
        return RouteInformation(location: '/terms-of-service');
      case '/privacy-policy':
        print(
            'restoreRouteInformation RouteInformation.location: /privacy-policy');
        return RouteInformation(location: '/privacy-policy');
      case '/privacy-settings':
        print(
            'restoreRouteInformation RouteInformation.location: /privacy-settings');
        return RouteInformation(location: '/privacy-settings');
      case '/community-guidelines':
        print(
            'restoreRouteInformation RouteInformation.location: /community-guidelines');
        return RouteInformation(location: '/community-guidelines');
      case '/legal-notice':
        print(
            'restoreRouteInformation RouteInformation.location: /legal-notice');
        return RouteInformation(location: '/legal-notice');
      default:
        print(
            'restoreRouteInformation  ### Default RouteInformation.location: /cyclists');
        return RouteInformation(location: '/cyclists');
    }
  }
}

我还通过设置的打印结果注意到，当应用程序第一次加载时，可能会有一个奇怪的循环：

解析器

1. AppRouteInformationParser.parseRouteInformation called for /
2. AppRouteInformationParser uri has no segments and is /
3. AppRouteInformationParser.urlSegment switch case : /

RuterDelegate

1. RouterDelegate.currentConfiguration appState.selectedPage is

解析器

1. AppRouteInformationParser.restoreRouteInformation called for path /
2. restoreRouteInformation RouteInformation.location: /

RouterDelegate

1. RouterDelegate.setNewRoutePath path is /

AppState

触发委托生成的

1. AppState setting selectedPage to /，因此再次

RouterDelegate

1. RouterDelegate.currentConfiguration appState.selectedPage is /

解析器

1. AppRouteInformationParser.restoreRouteInformation called for path /
2. restoreRouteInformation RouteInformation.location: /

意料之外的印刷

RouterDelegate

1. RouterDelegate.currentConfiguration appState.selectedPage is /

解析器

1. AppRouteInformationParser.restoreRouteInformation called for path /
2. restoreRouteInformation RouteInformation.location: /

当按钮按下时，我只得到：

按钮

1.selected tapped is /about

AppState

1. AppState setting selectedPage to /about

RouterDelegate

1. RouterDelegate.currentConfiguration appState.selectedPage is /about

解析器

1. AppRouteInformationParser.restoreRouteInformation called for path /about
2. restoreRouteInformation RouteInformation.location: /about

Answer 1

经过几天的挣扎，我终于发现了这个问题：

在main.dart构建方法中，我返回一个以MaterialApp.router作为home:的MaterialApp，而不是直接返回MaterialApp.router并将所有MaterialApp配置参数移到其中。现在一切都如期而至。

错误的方向：

  AppRouterDelegate _routerDelegate = AppRouterDelegate();

  AppRouteInformationParser _routeInformationParser =
      AppRouteInformationParser();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '',
      color: Colors.red,
      localizationsDelegates: [
        const AppLocalizationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'),
        const Locale('it', 'IT')
//        const Locale('es', 'ES'),
      ],
      localeResolutionCallback:
          (Locale locale, Iterable<Locale> supportedLocales) {
        for (Locale supportedLocale in supportedLocales) {
          if (supportedLocale.languageCode == locale.languageCode ||
              supportedLocale.countryCode == locale.countryCode) {
            print('Web device Locale is $locale');
            return supportedLocale;
          }
        }
        return supportedLocales.first;
      },
      debugShowCheckedModeBanner: false,
      home: MaterialApp.router(
          routeInformationParser: _routeInformationParser,
          routerDelegate: _routerDelegate),
    );
  }

正确的方法是：

AppRouterDelegate _routerDelegate = AppRouterDelegate();

  AppRouteInformationParser _routeInformationParser =
      AppRouteInformationParser();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: _routeInformationParser,
      routerDelegate: _routerDelegate,
      debugShowCheckedModeBanner: false,
      title: '',
      color: Colors.red,
      localizationsDelegates: [
        const AppLocalizationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'),
        const Locale('it', 'IT')
//        const Locale('es', 'ES'),
      ],
      localeResolutionCallback:
          (Locale locale, Iterable<Locale> supportedLocales) {
        for (Locale supportedLocale in supportedLocales) {
          // if (UniversalPlatform.isWeb) {
          if (supportedLocale.languageCode == locale.languageCode ||
              supportedLocale.countryCode == locale.countryCode) {
            print('Web device Locale is $locale');
            return supportedLocale;
          }
        }
        return supportedLocales.first;
      },
      // localeListResolutionCallback: ,
    );
  }