How to properly navigate from /parent/childA to /parent/childB/some/other/path

[nikolaihen]

Here is my router:

@MaterialAutoRouter(
  replaceInRouteName: 'Page,View,Route',
  routes: <AutoRoute>[
    AutoRoute(
      path: '/home',
      page: HomePage,
      children: [
        AutoRoute(initial: true, path: 'overview', page: OverviewPage),
        AutoRoute(
          path: 'catalogue',
          page: CatalogueBasePage,
          children: [
            AutoRoute(initial: true, path: '', page: ItemsCataloguePage),
            AutoRoute(path: 'items/:id', page: ItemDetailsPage),
          ],
        ),
     ],
  ],
)

I'm trying to navigate from inside /home/overview to /home/catalogue/items/someItemId, but I'm uncertain as to how I should do this.

I've tried to just make two calls to AutoRouter.of(context).navigate() with CatalogueBasePageRoute first then ItemDetailsPageRoute, but this results in the following error (even when first call is awaited): Looks like you're trying to navigate to a nested route without adding their parent to stack first.

Preferrably I would just do this from inside /home/overview and hope that auto_route figures out the route hierarchy for me and adds the neccessary routes to the stack, but that of course results in the same error:

AutoRouter.of(context).navigate(ItemDetailsPageRoute(itemId: 'someItemId'));

The AutoRouter has a function called navigateAll but I couldn't find any useful documentation of the usage. Can this be used, and if so - how?

I've tried to look up similar issues and read the docs, but can't seem to find the solution to this without doing something fishy using Future.delayed (which shows the catalogue route first which is not desired - I want to instantly go from /home/overview to /home/catalogue/items/someItemId):

final tabsRouter = AutoTabsRouter.of(context);
tabsRouter.setActiveIndex(HomeNavigationTab.catalogue); // change route from /home/overview to /home/catalogue
await Future.delayed(
  Duration(milliseconds: 100),
  () => tabsRouter.navigate(
    ItemDetailsPageRoute(itemId: itemId),
  ),
);

I would like to avoid using this workaround for obvious reasons.

[paulononaka]

+1. I got here trying to do the exactly same thing. I'm waiting for a response from whoever have an answer. Thanks!

[duhanbalci]

+1

[eertmanhidde]

Can you try something like this?

context.navigateTo(
  CatalogueRouter(
    children: [
      ItemsCatalogueRoute(), // <- this ensures that the item catalogue route is below the item detail page stack, meaning your detail page will have a back button going to that route.
      ItemDetailsPage(id: 1)
    ],
  ),
);

Not sure whether I've given the proper router names, but this is something that works for us. I've read about it here: https://autoroute.vercel.app/basics/nested_routes

Here is my router setup:

@MaterialAutoRouter(
  replaceInRouteName: 'View,Route',
  routes: <AutoRoute>[
    AutoRoute(
      path: '/',
      name: 'HomeRouter',
      page: HomeView,
      children: [
        AutoRoute(
          path: 'dashboard',
          name: 'DashboardRouter',
          page: EmptyRouterPage,
          children: [
            AutoRoute(path: '', page: DashboardView),
            AutoRoute(path: 'planning', page: PlanningView),
          ],
        ),
        AutoRoute(
          path: 'districts',
          name: 'DistrictsRouter',
          page: EmptyRouterPage,
          children: [
            AutoRoute(path: '', page: DistrictsView),
            AutoRoute(path: ':districtId', page: DistrictView),
          ],
        ),
      ],
    ),
  ],
)

Where the following code allows me to navigate from /home/dashboard to /home/districts/1:

context.navigateTo(
  DistrictsRouter(
    children: [
      const DistrictsRoute(),
      DistrictRoute(districtId: 1) // <- notice it's singular
    ],
  ),
);

You could probably also make use of the named routes and navigate directly to it like so:

context.navigateNamedTo(
  '/catalogue/items/1',
);

With this solution, I however couldn't get the back button to work since there is no back route in that stack (for my situation).

Hope this helps!

[mdeandrea-mrmilu]

Maybe this issue is related with #731

[renanboni]

one thing that I learned about flutter, relying on third-party libraries is always a nightmare

[mdeandrea-mrmilu]

@renanboni Welcome to open source dependencies. No one has time or/and money to support packages

I started an big effort with this dependencies to try improve support of the largest package of forms in Flutter. If do you need help or contribute there, you are welcome

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions