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)
pushPath
function:context.router.pushNamed("/books")
You can also define dynamic segments by prefixing with a colon like so:
AutoRoute(path: '/books/:bookId', page: BookDetailsPage)
@PathParam('optional-alias')
with the same alias/name of the segment.class BookDetailsPage extends StatelessWidget {
BookDetailsPage({@PathParam('bookId') this.bookId});
final int bookId;
...
/books/1
in the browser will navigate you to BookDetailsPage
and automatically extract the bookId
argument from the pathQuery 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.
RouteData
object: alias/name of the segment.RouteData.of(context).pathParams;
// or using the extension
context.route.queryParams
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),
]
RedirectRoute
s are fully matched.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: '/')