Nested navigation with AutoTabsRouter in Web Platform

[kaushikbh99]

Auto Router Dart file code

AutoRoute(page: NavBarRoute.page, children: [
      AutoRoute(page: HomeRoute.page, children: [
        AutoRoute(page: LoanDetailsRoute.page),
        AutoRoute(page: URNVerificationRoute.page),
        AutoRoute(page: PanVerificationRoute.page),
      ]),
      AutoRoute(page: CheckEligibilityStepsRoute.page),
      AutoRoute(page: MyLoanRoute.page),
      AutoRoute(page: DocumentsRoute.page),
      AutoRoute(page: FAQSRoute.page),
      AutoRoute(page: SupportRoute.page),
    ]),

After push Navigation Bar Page code (Navigation Bar Dart file code)

AutoTabsRouter(
          homeIndex: 0,
          routes: [
            HomeRoute(children: [
              LoanDetailsRoute(),
              URNVerificationRoute(),
              PanVerificationRoute(),
            ]),
            const MyLoanRoute(),
            const DocumentsRoute(),
            ProfileRoute(args: 1),
            CheckEligibilityStepsRoute(setWebIndex: setWebActiveIndex),
            const WebAllNotificationsRoute(),
          ],
          builder: (context, child) {
            tabsRouter = AutoTabsRouter.of(context);
            _checkSelectedTabWeb();
            return Scaffold(
                key: widget.key,
                body: Row(children: [
                  _buildSideNavBar(),
                  _buildWebScreenView(child),
                ]));
          })

How can I navigate home to LoanDetails ? @Milad-Akarie

[kaushikbh99]

I've also tried below method but it doesn't work appRouter.push(HomeRoute(children: [URNVerificationRoute()]));

[lukecastronuevo]

Have you already fixed it on your end? I might help you as I have successfully implemented the same logic on my app.

[lukecastronuevo]

You just need to change few parts on your router.dart file this is what my router.dart looks like

@AutoRouterConfig(replaceInRouteName: 'Screen,Route')
class AppRouter extends $AppRouter {
  @override
  final List<AutoRoute> routes = [
    AutoRoute(path: "/", page: StartupView.page),
    AutoRoute(path: "/navigation", page: NavigationView.page, children: [
      AutoRoute(path: "home", page: HomeView.page),
      AutoRoute(
        path: "learning-hub-navigaton",
        page: LearningNavigationView.page,
        children: [
          AutoRoute(path: "learning-hub", page: LearningHubView.page, initial: true),
          AutoRoute(path: "new-activity", page: NewActivityView.page),
          AutoRoute(path: "activity-info", page: ActivityInfoView.page),
        ],
      ),
      AutoRoute(path: "create-course", page: CreateCourseView.page),
      AutoRoute(path: "settings", page: SettingsView.page),
    ]),
  ];
}

Remember if you are nesting a navigation inside a nested navigation your inner navigation should have a top view dedicated for handling the inner navigation, on my end this is the LearningNavigationView.page, following is the content of this file:

Padding(
      padding: const EdgeInsets.fromLTRB(0, 0, 20, 0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
           ... // --> this should be your navbar if i'm not mistaken
          ),
          Expanded(child: AutoRouter()) // --> this is important this is where inner navigations will be displayed like some kind of a placeholder --> [ AutoRoute(path: "learning-hub", page: LearningHubView.page, initial: true),
          AutoRoute(path: "new-activity", page: NewActivityView.page),
          AutoRoute(path: "activity-info", page: ActivityInfoView.page),] these screens are displayed here
        ],
      ),
    );

Remember to set an initial page for your inner nested navigation

[kaushikbh99]

@lukecastronuevo, How can you use AutoRoute as children of column widget, can you please explain me? And how can we navigate inner route in web app?

cc @Milad-Akarie

[nokia6290]

wait so routing for nested in web does not work..? been trying to use navigate, replace, push - nothing is working

p.s. independent routes work

[lukecastronuevo]

I have created a sample app with nested navigation. Check it here:

It's not much, but it might help you with understanding nested navigation in web. Also I can confirm that autoroute works on web.

[nokia6290]

@lukecastronuevo

Hello. Thanks for the sample project. I've been trying to to apply it to regular nesting (page1) then page1/item1, then page1/item1/details

but its not working for me at all. It completely ignores url query params.

By chance u have a successful project with nested children ?