Working with paths


Paths are especially useful when you are using deep linking in your app, or if you are developing for web. To give a page a path, just set it's path field like so:

AutoRoute(path: "/books", page: BooksPage)

Now, we can easily navigate to this page via deep link, or with the pushPath function:
context.router.pushNamed("/books")

Path Parameters (Dyanmic Segments)


You can also define dynamic segments by prefixing with a colon like so:

AutoRoute(path: '/books/:bookId', page: BookDetailsPage)
If you do this, the corresponding page's constructor must have a parameter annotated with @PathParam('optional-alias') with the same alias/name of the segment.
class BookDetailsPage extends StatelessWidget {
    BookDetailsPage({('bookId') this.bookId}); 

    final int bookId;
    ...
Now, writing /books/1 in the browser will navigate you to BookDetailsPage and automatically extract the bookId argument from the path

Query Parameters


Query parameters are accessed the same way. Simply annotate the constructor parameter to hold the value of the query param with @QueryParam('optional-alias') and let AutoRoute do the rest.

You can also access both path or query parameters using the scoped RouteData object: alias/name of the segment.
RouteData.of(context).pathParams;
// or using the extension
context.route.queryParams

Redirection


Paths can be redirected using RedirectRoute . The following setup will navigate us to /books when / is matched.

<AutoRoute> [
    RedirectRoute(path: '/', redirectTo: '/books'),
    AutoRoute(path: '/books', page: BooksPage),
]
Note: RedirectRoute s are fully matched.

Wildcards


AutoRoute also supports wildcard matching to handle invalid or undefined paths.

// wildcards can be used with defined prefixes
AutoRoute(path: '/books/*', page: BooksPage) 
// or with RedirectRoute  
RedirectRoute(path: '*', redirectTo: '/')

Note: be sure to always add your wildcards at the end of your route list because routes are matched in order.