Root Router

The root router is the top-level router of your app that serves as the navigation entry point of your app. Use an @AdaptiveAutoRouter , @MaterialAutoRouter or @CupertinoAutoRouter to define your router. Then, declare your routes with the AutoRoute widget like so!

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: HomePage, initial: true),
    AutoRoute(page: BooksPage),
    AutoRoute(page: BookDetailsPage),
    AutoRoute(page: AccountPage), 
    AutoRoute(page: AccountDetailsPage), 
  ],
)
class $AppRouter {}

Where are the paths?

You might have noticed that no paths were defined in the example above. This is because paths are completely optional in AutoRoute because PageRouteInfo objects are matched by name unless pushed as a string.

We can navigate to the desired page by simply calling:
context.pushRoute(BooksRoute())
to get the the BooksPage or
context.pushRoute(BookDetailsRoute())
to get the the BookDetailsPage

This is only possible because of the replaceInRouteName: 'Page,Route' field in our router example above. This field basically tells Auto Route to replace Page with Route for each Auto Route page. Thus, our BooksPage turns into a BooksRoute route that we can navigate to.

When no paths are specified like this example, paths will be generated from the page name. For example, BooksPage will have the path "books-page". However, if the initial field is set to true, eg. initial: true then it's path will be "/" unless it's relative. In the case that it's a relative path, then it would be an empty string.

There are, however, cases where you would want to use paths. Continue to the next section to learn how!