title: Navigator 2.0 back button loop flutter web
body: <p>I've just implemented flutter Navigator 2.0 and so far seems good. I found one issue,  which is that if you're on a 404 page and you press the back button, the URL changes to the URL that caused the error and the 404 is displayed again. Basically, I have a 404 loop.</p>
  <p>Here's my code for reference:</p>
  <p><strong>///page router file</strong></p>
  <pre><code>class PageRouterDelegate extends RouterDelegate&lt;PageRoutePath&gt;
      with ChangeNotifier, PopNavigatorRouterDelegateMixin&lt;PageRoutePath&gt; {
    bool isServices = false;
    bool isLanding = true;
    bool isBrochure = false;
    bool isContact = false;
    bool isCareers = false;
    bool isProductsPage = false;
    bool isProductPage = false;
    int? productId;
    bool isGallery = false;
    bool isUnknown = false;
    bool show404 = false;
    bool isPrivacyPolicy = false;
  
    @override
    GlobalKey&lt;NavigatorState&gt;? get navigatorKey =&gt; GlobalKey&lt;NavigatorState&gt;();
  
    @override
    PageRoutePath get currentConfiguration {
      if (isServices) return PageRoutePath.services();
      if (isBrochure) return PageRoutePath.brochure();
      if (isContact) return PageRoutePath.contact();
      if (isCareers) return PageRoutePath.careers();
      if (isProductsPage) return PageRoutePath.productsPage();
      if (isProductPage &amp;&amp; productId != null) {
        return PageRoutePath.productPage(productId!);
      }
      if (isGallery) return PageRoutePath.gallery();
      if (isPrivacyPolicy) return PageRoutePath.privacyPolicy();
      if (show404) return PageRoutePath.unknown();
      return PageRoutePath.landing();
    }
  
    void tap(int id) {
      isProductPage = true;
      productId = id;
      notifyListeners();
    }
  
    @override
    Widget build(BuildContext context) {
      return Navigator(
        key: navigatorKey,
        pages: [
          MaterialPage(
              key: const ValueKey('home-page'),
              child: ResponsiveLanding(
                onTap: tap,
              )),
          if (show404)
            const MaterialPage(
                key: ValueKey('404'), child: UnknownPage()),
          if (isServices)
            const MaterialPage(
                key: ValueKey('service'), child: ResponsiveService()),
          if (isBrochure)
            const MaterialPage(
                key: ValueKey('brochure'), child: ResponsiveBrochure()),
          if (isContact)
            MaterialPage(
                key: const ValueKey('contact-us'),
                child: ResponsiveContactUs(
                  countryController: TextEditingController(),
                  companyNameController: TextEditingController(),
                  commentsController: TextEditingController(),
                  addressController: TextEditingController(),
                  emailController: TextEditingController(),
              nameController: TextEditingController(),
              phoneController: TextEditingController(),
            )),
          if (isCareers)
            MaterialPage(
                key: const ValueKey('careers'),
                child: ResponsiveCareers(
              phoneController: TextEditingController(),
              nameController: TextEditingController(),
              emailController: TextEditingController(),
            )),
          if (isProductsPage) const MaterialPage(key: ValueKey('products-page'),child: ResponsiveProducts()),
          if (isProductPage &amp;&amp; productId != null)
            MaterialPage(
                key: const ValueKey('product-page'),
                child: ResponsiveProduct(
              data: product_data[productId!],
            )),
          if (isGallery) const MaterialPage(key: ValueKey('gallery'),child: ResponsiveGallery()),
          if (isPrivacyPolicy) const MaterialPage(key: ValueKey('privacy-policy'),child: PrivacyPolicy()),
        ],
        onPopPage: (route, result)
        {
          if (!route.didPop(result)) {
            isUnknown = false;
            show404 = false;
            notifyListeners();
            return false;
          }
          final checkRoute = route.settings as MaterialPage;
          if(checkRoute.key == const ValueKey('404')){
  
            productId = null;
            show404 = false;
            notifyListeners();
  
            return true;
          }
          print('not-checked');
          return true;
        },
      );
    }
  
  
  
    @override
    // ignore: avoid_renaming_method_parameters
    Future&lt;void&gt; setNewRoutePath(PageRoutePath path) async {
      if (path.isUnknown) {
        productId = null;
        show404 = true;
        return null;
      }
  
      if (path.isServices) {
        isServices = true;
      }
  
      if (path.isContact) {
        isContact = true;
      }
  
      if (path.isCareers) {
        isCareers = true;
      }
  
      if (path.isProductsPage) {
        isProductsPage = true;
      }
  
      if (path.isProductPage &amp;&amp; path.productId != null) {
        if (path.productId! &lt; 0 || path.productId! &gt; product_data.length - 1) {
          productId = null;
          show404 = true;
          return null;
        }
        isProductPage = true;
        productId = path.productId;
      }
  
      if (path.isGallery) {
        isGallery = true;
      }
  
      if (path.isPrivacyPolicy) {
        isPrivacyPolicy = true;
      }
  
      isUnknown = false;
      show404 = false;
    }
  }
  
  class PageRouteInformationParser extends RouteInformationParser&lt;PageRoutePath&gt; {
    @override
    Future&lt;PageRoutePath&gt; parseRouteInformation(
        RouteInformation routeInformation) async {
      final uri = Uri.parse(routeInformation.location!);
  
      ///handle '/' landing
      if (uri.pathSegments.isEmpty) {
        return PageRoutePath.landing();
      }
  
      /// handle /services
      if (uri.pathSegments.first == 'services' &amp;&amp; uri.pathSegments.length == 1) {
        return PageRoutePath.services();
      }
  
      /// handle /brochure
      if (uri.pathSegments.first == 'brochure' &amp;&amp; uri.pathSegments.length == 1) {
        return PageRoutePath.brochure();
      }
  
      /// handle /contact-us
      if (uri.pathSegments.first == 'contact-us' &amp;&amp;
          uri.pathSegments.length == 1) {
        return PageRoutePath.contact();
      }
  
      /// handle /careers
      if (uri.pathSegments.first == 'careers' &amp;&amp; uri.pathSegments.length == 1) {
        return PageRoutePath.careers();
      }
  
      /// handle /products
      if (uri.pathSegments.first == 'products' &amp;&amp; uri.pathSegments.length == 1) {
        return PageRoutePath.productsPage();
      }
  
      /// handle /product/int
      if (uri.pathSegments.first == 'product' &amp;&amp;
          int.tryParse(uri.pathSegments.elementAt(1)) != null &amp;&amp;
          uri.pathSegments.length == 2) {
        return PageRoutePath.productPage(
            int.tryParse(uri.pathSegments.elementAt(1))!);
      }
  
      /// handle /gallery
      if (uri.pathSegments.first == 'gallery' &amp;&amp; uri.pathSegments.length == 1) {
        return PageRoutePath.gallery();
      }
  
      /// handle /privacy-policy
      if (uri.pathSegments.first == 'privacy-policy' &amp;&amp;
          uri.pathSegments.length == 1) {
        return PageRoutePath.privacyPolicy();
      }
  
      return PageRoutePath.unknown();
    }
  
    @override
    RouteInformation restoreRouteInformation(PageRoutePath configuration) {
      if (configuration.isUnknown) {
        return const RouteInformation(location: '/404');
      }
      else if (configuration.isServices) {
        return const RouteInformation(location: '/services');
      }
      else if (configuration.isBrochure) {
        return const RouteInformation(location: '/brochure');
      }
      else if (configuration.isContact) {
        return const RouteInformation(location: '/contact-us');
      }
      else if (configuration.isCareers) {
        return const RouteInformation(location: '/careers');
      }
      else if (configuration.isProductPage) {
        return RouteInformation(location: '/product/${configuration.productId}');
      }
      else if (configuration.isProductsPage) {
        return const RouteInformation(location: '/products');
      }
      else if (configuration.isGallery) {
        return const RouteInformation(location: '/gallery');
      }
      else if (configuration.isPrivacyPolicy) {
        return const RouteInformation(location: '/privacy-policy');
      }
      return const RouteInformation(location: '/home');
    }
  }
  </code></pre>
  <p><strong>///routePath class</strong></p>
  <pre><code>class PageRoutePath {
    final int? productId;
    final bool isLanding;
    final bool isServices;
    final bool isBrochure;
    final bool isContact;
    final bool isCareers;
    final bool isProductPage;
    final bool isProductsPage;
    final bool isGallery;
    final bool isUnknown;
    final bool isPrivacyPolicy;
  
    PageRoutePath.landing()
        : isLanding = true,
          isServices = false,
          isBrochure = false,
          isContact = false,
          isCareers = false,
          isProductPage = false,
          isProductsPage = false,
          isGallery = false,
          isUnknown = false,
          isPrivacyPolicy = false,
          productId = null;
  
    PageRoutePath.services()
        : isLanding = false,
          isServices = true,
          isBrochure = false,
          isContact = false,
          isCareers = false,
          isProductPage = false,
          isProductsPage = false,
          isGallery = false,
          isUnknown = false,
          isPrivacyPolicy = false,
          productId = null;
  
    PageRoutePath.brochure()
        : isLanding = false,
          isServices = false,
          isBrochure = true,
          isContact = false,
          isCareers = false,
          isProductPage = false,
          isProductsPage = false,
          isGallery = false,
          isUnknown = false,
          isPrivacyPolicy = false,
          productId = null;
  
    PageRoutePath.contact()
        : isLanding = false,
          isServices = false,
          isBrochure = false,
          isContact = true,
          isCareers = false,
          isProductPage = false,
          isProductsPage = false,
          isGallery = false,
          isUnknown = false,
          isPrivacyPolicy = false,
          productId = null;
  
    PageRoutePath.careers()
        : isLanding = false,
          isServices = false,
          isBrochure = false,
          isContact = false,
          isCareers = true,
          isProductPage = false,
          isProductsPage = false,
          isGallery = false,
          isUnknown = false,
          isPrivacyPolicy = false,
          productId = null;
  
    PageRoutePath.productPage(int id)
          : isLanding = false,
          isServices = false,
          isBrochure = false,
          isContact = false,
          isCareers = false,
          isProductPage = true,
          isProductsPage = false,
          isGallery = false,
          isUnknown = false,
          isPrivacyPolicy = false,
          productId = id;
  
    PageRoutePath.productsPage()
        : isLanding = false,
          isServices = false,
          isBrochure = false,
          isContact = false,
          isCareers = false,
          isProductPage = false,
          isProductsPage = true,
          isGallery = false,
          isUnknown = false,
          isPrivacyPolicy = false,
          productId = null;
  
    PageRoutePath.gallery()
        : isLanding = false,
          isServices = false,
          isBrochure = false,
          isContact = false,
          isCareers = false,
          isProductPage = false,
          isProductsPage = false,
          isGallery = true,
          isUnknown = false,
          isPrivacyPolicy = false,
          productId = null;
  
    PageRoutePath.unknown()
        : isLanding = false,
          isServices = false,
          isBrochure = false,
          isContact = false,
          isCareers = false,
          isProductPage = false,
          isProductsPage = false,
          isGallery = false,
          isUnknown = true,
          isPrivacyPolicy = false,
          productId = null;
  
    PageRoutePath.privacyPolicy()
        : isLanding = false,
          isServices = false,
          isBrochure = false,
          isContact = false,
          isCareers = false,
          isProductPage = false,
          isProductsPage = false,
          isGallery = false,
          isUnknown = false,
          isPrivacyPolicy = true,
          productId = null;
  }
  </code></pre>
  <p><strong>pressing the back button goes back to url that caused the error and returns a 404 page.</strong>
  <a href="https://i.stack.imgur.com/s3xz5.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s3xz5.gif" alt="enter image description here" /></a></p>