Repository files navigation

Route is a client routing library for Dart that helps make buildingsingle-page web apps.

Add this package to your pubspec.yaml file:

dependencies:  route_hierarchical: any

Then, runpub install to download and link in the package.

Route is built aroundUrlMatcher, an interface that defines URL templateparsing, matching and reversing.

The default implementation of theUrlMatcher isUrlTemplate. As an example,consider a blog with a home page and an article page. The article URL has theform /article/1234. It can matched by the following template:/article/:articleId.

Router is a stateful object that contains routes and can perform URL routingon those routes.

TheRouter can listen toWindow.onPopState (or fallback toWindow.onHashChange in older browsers) events and invoke the correcthandler so that the back button seamlessly works.

Example (client.dart):

library client;import'package:route_hierarchical/client.dart';main() {var router=newRouter();  router.root    ..addRoute(name:'article', path:'/article/:articleId', enter: showArticle)    ..addRoute(name:'home', defaultRoute:true, path:'/', enter: showHome);  router.listen();}voidshowHome(RouteEvent e) {// nothing to parse from path, since there are no groups}voidshowArticle(RouteEvent e) {var articleId= e.parameters['articleId'];// show article page with loading indicator// load article from server, then render article}

The client side router can let you define nested routes.

var router=newRouter();router.root  ..addRoute(     name:'usersList',     path:'/users',     defaultRoute:true,     enter: showUsersList)  ..addRoute(     name:'user',     path:'/user/:userId',     mount: (router)=>       router         ..addRoute(             name:'articleList',             path:'/acticles',             defaultRoute:true,             enter: showArticlesList)         ..addRoute(             name:'article',             path:'/article/:articleId',             mount: (router)=>               router                 ..addRoute(                     name:'view',                     path:'/view',                     defaultRoute:true,                     enter: viewArticle)                 ..addRoute(                     name:'edit',                     path:'/edit',                     enter: editArticle)))

The mount parameter takes either a function that accepts an instance of a newchild router as the only parameter, or an instance of an object that implementsRoutable interface.

typedefvoidMountFn(Router router);

or

abstractclassRoutable {voidconfigureRoute(Route router);}

In either case, the child router is instantiated by the parent router aninjected into the mount point, at which point child router can be configuredwith new routes.

Routing with hierarchical router: when the parent router performs a prefixmatch on the URL, it removes the matched part from the URL and invokes thechild router with the remaining tail.

For instance, with the above example lets consider this URL:/user/jsmith/article/1234.Route "user" will match/user/jsmith and invoke the child router with/article/1234.Route "article" will match/article/1234 and invoke the child router with ``.Route "view" will be matched as the default route.The resulting route path will be:user -> article -> view, or simply `user.article.view`

router.go('usersList');router.go('user.articles', {'userId':'jsmith'});router.go('user.article.view', {'userId':'jsmith','articleId',1234});router.go('user.article.edit', {'userId':'jsmith','articleId',1234});

If "go" is invoked on child routers, the router can automatically reconstructand generate the new URL from the state in the parent routers.