Nested Routes

Nesting routes with AutoRoute is as easy as populating the children field of the parent AutoRoute . Building upon our previous example in the Root Router section, we can update our router to use nested routes for the Books and Account routes

@MaterialAutoRouter(
    replaceInRouteName: 'Page,Route',
    routes: <AutoRoute>[ 
        AutoRoute(path: "/", page: HomePage), 
        AutoRoute(
            path: "/books",
            name: "BooksRouter",
            page: EmptyRouterPage,
            children: [
                AutoRoute(path: '', page: BooksPage),
                AutoRoute(path: ':bookId', page: BookDetailsPage),
                RedirectRoute(path: '*', redirectTo: ''),
            ],
        ),
        AutoRoute(
            path: "/account",
            name: "AccountRouter",
            page: EmptyRouterPage,
            children: [
                AutoRoute(path: '', page: AccountPage),
                AutoRoute(path: 'details', page: AccountDetailsPage),
                RedirectRoute(path: '*', redirectTo: ''),
            ],
        ),
    ],
)
class $AppRouter {}
Now you have separate routers for the HomePage , Books routes and Account routes. To navigate within a route, use the standard routing methods that we used in Root Router

Navigating between routers

Routing controllers are context-scoped, so we must perform an additional step when navigating across routers. If we want to navigate from the BooksRouter to AccountRouter , we need to:

  1. get the router ( AccountRouter in this case)
  2. push the account routes that we we want by defining them in the children parameter
context.pushRoute(AccountRouter(
  children: [
    // push any sequence of Account routes here   
    // the last route will be the one that is currently visible
    AccountRoute(),
    AccountSettingsRoute()
  ]
));
Note that we gave our AccountRouter a name parameter of AccountRouter which allows this to work!