{"id":29623841,"url":"https://github.com/mikemitterer/m4d_router","last_synced_at":"2025-07-21T05:08:12.121Z","repository":{"id":56834317,"uuid":"138572418","full_name":"MikeMitterer/m4d_router","owner":"MikeMitterer","description":"Router-Package for Material4Dart apps","archived":false,"fork":false,"pushed_at":"2019-01-17T14:58:23.000Z","size":2427,"stargazers_count":7,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-16T06:44:34.319Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.mikemitterer.at/2018/06/29/router-library-fuer-material4dart/","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MikeMitterer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-25T09:25:02.000Z","updated_at":"2023-01-31T16:55:08.000Z","dependencies_parsed_at":"2022-09-09T21:10:39.185Z","dependency_job_id":null,"html_url":"https://github.com/MikeMitterer/m4d_router","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/MikeMitterer/m4d_router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeMitterer%2Fm4d_router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeMitterer%2Fm4d_router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeMitterer%2Fm4d_router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeMitterer%2Fm4d_router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MikeMitterer","download_url":"https://codeload.github.com/MikeMitterer/m4d_router/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeMitterer%2Fm4d_router/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266242072,"owners_count":23898102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-21T05:08:11.038Z","updated_at":"2025-07-21T05:08:12.113Z","avatar_url":"https://github.com/MikeMitterer.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Material4Dart router\n\nm4d_router is a client routing library for Dart. It helps make building\nsingle-page web apps and using `HttpServer` easier.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/MikeMitterer/m4d_router/master/doc/images/m4d_router.gif\" alt=\"Preview\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\nAdd this package to your pubspec.yaml file:\n\n    dependencies:\n      m4d_router: any\n\nThen, run `pub get` to download and link in the package.\n\n## Example\n\nLive: [m4d_router.example.mikemitterer.at](http://m4d_router.example.mikemitterer.at/)  \nSource on [GitHub](https://github.com/MikeMitterer/m4d_router/tree/route_version/example/browser)\n\n```dart\nvoid main() {\n    final router = new Router();\n\n    configLogging(show: Level.INFO);\n    _configRouter(router);\n\n    dom.querySelector('#output').text = 'Your Dart app is running.';\n}\n\nvoid _configRouter(final Router router ) {\n\n    router\n        ..addRoute(name: \"Test I\", path: new UrlPattern('/#/test'),\n            enter: (final RouteEnterEvent event) {\n                _log(event.route.title);\n                _logger.info(\"Path: ${event.path} Params: ${event.params.join(\",\")}\");\n                _showImage(\"https://upload.wikimedia.org/wikipedia/commons/1/11/Test-Logo.svg\");\n            })\n\n        ..addRoute(name: 'Cats', path: new ReactPattern('/cats'),\n            enter: (final RouteEnterEvent event) {\n                _log(event.route.title);\n                _logger.info(\"Path: ${event.path} Params: ${event.params.join(\",\")}\");\n                _showImage(\"https://i1.wp.com/www.oxygen.ie/wp-content/uploads/2016/11/main_1500.jpg?resize=750%2C400\");\n            })\n\n        ..addRoute(name: 'Specific cat', path: new ReactPattern(r'/cats/(\\w+)'),\n            enter: (final RouteEnterEvent event) {\n                _log(\"${event.route.title}: ${event.params.join(\",\")}\");\n                _logger.info(\"Path: ${event.path} Params: ${event.params.join(\",\")}\");\n                if(event.params.first.toLowerCase() == \"grumpy\") {\n                    _showImage(\"https://pbs.twimg.com/media/CsW0pmxUsAAuvEN.jpg\");\n                } else {\n                    _showImage(\"https://catzone-tcwebsites.netdna-ssl.com/wp-content/uploads/2014/09/453768-cats-cute.jpg\");\n                }\n            })\n\n        ..addRoute(name: \"Google for cats\", path: new ReactPattern('/google'),\n            enter: (final RouteEnterEvent event) {\n                _log(event.route.title);\n                _logger.info(\"Path: ${event.path} Params: ${event.params.join(\",\")}\");\n                _showImage(\"https://upload.wikimedia.org/wikipedia/commons/a/a5/Google_Chrome_icon_%28September_2014%29.svg\");\n            })\n    ;\n\n    // optional\n    router.onEnter.listen((final RouteEnterEvent event) {\n        _logger.info(\"RoutEvent ${event.route.title} -\u003e ${event.route.urlPattern.pattern}\");\n    });\n\n    // optional\n    router.onError.listen((final RouteErrorEvent event) {\n        _logger.info(\"RouteErrorEvent ${event.exception}\");\n    });\n\n    router.listen(); // Start listening\n}\n\nvoid _log(final String logMessage) {\n    final logElement = dom.querySelector(\"#log\") as dom.UListElement;\n    logElement.append(new dom.LIElement()..text = logMessage);\n}\n\nvoid _showImage(final String url) {\n    final img = dom.querySelector(\"img\") as dom.ImageElement;\n    img.src = url;\n}\n```\n\n### UrlPattern\n\nRoute is built around `UrlPattern` a class that matches, parses and produces\nURLs. A `UrlPattern` is similar to a regex, but constrained so that it is\n_reversible_, given a `UrlPattern` and a set of arguments you can produce the\nURL that when parsed returns those same arguments. This is important for keeping\nthe URL space for your app flexible so that you can change a URL for a resource\nin one place and keep your app working.\n\nRoute lets you use the same URL patterns for client-side and server-side\nrouting. Just define a library containing all your URLs.\n\nAs an example, consider a blog with a home page and an article page. The article\nURL has the form /article/1234. We want to show articles without reloading the\npage.\n\n## Routing\n\nOn the browser, there is a `Router` class that associates `UrlPattern`s\nto handlers. Given a URL, the router finds a pattern that matches, and invokes\nits handler. The handlers\nare then responsible for rendering the appropriate changes to the page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikemitterer%2Fm4d_router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikemitterer%2Fm4d_router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikemitterer%2Fm4d_router/lists"}