Flutter-web Autoroute, issue trying to directly access to nested route

Question

I have an app with 2 screens:

• List of Merchants: screen show a list of merchants
• Single Merchant: screen with Tabs, each tab should show some widget and should have its own route

The routes are configured like this:

AutoRoute(
  path: '/merchants',
  name: 'MerchantsRoute',
  page: EmptyRouterPage,
  guards: [AuthGuard],
  children: [
    AutoRoute(path: '', page: MerchantsView, guards: [AuthGuard], initial: true),
    AutoRoute(
      path: ':id',
      page: SingleMerchantView,
      guards: [AuthGuard],
      children: [
        AutoRoute(path: 'dashboard', page: Dashboard, guards: [AuthGuard], name: 'MerchantDashboardRoute'),
        AutoRoute(path: 'purchases', page: PurchasesList, guards: [AuthGuard], name: 'MerchantPurchasesRoute'),
        AutoRoute(path: 'profile', page: PurchasesList, guards: [AuthGuard], name: 'MerchantProfileRoute'),
      ]
    ),

  ]
),

SinglMerchantView is the widget containing the AutoTabsScaffold and the TabBarView

Using flutter web, when I access directly (by typing directly the url in chrome) to:

• /merchants ==> It works
• /merchants/some_merchant_id ==> It works, showing correctly the SingleMerchantView with first tab selected and the Dashboard built
• /merchants/some_merchant_id/dashboard ==> It doesn't work like expected. I'm expecting that the SingleMerchantView is first created, then it should create the Dashboard widget What I see is that it's trying to create directly the widget Dashboard without creating the widget SingleMerchantView. As Dashboard widget is expecting a mandatory id property (which is normally injected by the parent SingleMerchantView) then the page fails

Any idea on how to fix this?

Answer 1

My understanding is that you need an EmptyRouterPage for each of the nestles. Something similar to this:

AutoRoute(
  path: '/merchants',
  name: 'MerchantsRoute',
  page: EmptyRouterPage,
  guards: [AuthGuard],
  children: [
    AutoRoute(path: '', page: MerchantsView, guards: [AuthGuard], initial: true),
    AutoRoute(
      name: 'SingleMerchantRouter',
      path: ':id',
      page: EmptyRouterPage,
      guards: [AuthGuard],
      children: [
        AutoRoute(path: '', page: SingleMerchantView, guards: [AuthGuard]),
        AutoRoute(path: 'dashboard', page: Dashboard, guards: [AuthGuard], name: 'MerchantDashboardRoute'),
        AutoRoute(path: 'purchases', page: PurchasesList, guards: [AuthGuard], name: 'MerchantPurchasesRoute'),
        AutoRoute(path: 'profile', page: PurchasesList, guards: [AuthGuard], name: 'MerchantProfileRoute'),
      ]
    ),

  ]
),

I haven't been able to test, but it is similar to an issue I had today.