How to Use Dart Route API

I have created a sample app to test the Dart Route API. I have the following code:

urls.dart

library urls;

import 'package:route/url_pattern.dart';

final homeUrl = new UrlPattern(r'/');
final otherScreenUrl = new UrlPattern(r'/other_screen/');

main.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div id="sample_container_id">
      <p id="sample_text_id"></p>
    </div>

    <script type="application/dart" src="main.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

main.dart

import 'dart:html';
import 'package:route/client.dart';

import 'urls.dart';

void main() {
  var router = new Router()
    ..addHandler(homeUrl, _showHome)
    ..addHandler(otherScreenUrl, _showOtherScreen)
    ..listen();

  querySelector("#sample_text_id")
    ..text = "Click me!"
    ..onClick.listen(_gotoOtherScreen);
}

_gotoOtherScreen(MouseEvent event) {
  // I am trying to navigate to the "other screen" by using history.pushState here
  window.history.pushState({'url' : otherScreenUrl}, "other screen", otherScreenUrl);
}

_showHome(String path) {
  querySelector("#other_element")
    ..remove();
}

_showOtherScreen(String path) {
  querySelector("#sample_container_id")
    ..append(new SpanElement()
      ..innerHtml = "now in other screen"
      ..id = "other_element");
}

I am getting the following errors when running the app and then clicking on the <p> tag:

Breaking on exception: Illegal argument(s): No handler found for /test/web/main.html

Exception: Illegal argument(s): No handler found for /test/web/main.html Router._getUrl (package:route/client.dart:53:7) Router.handle (package:route/client.dart:71:22)
Router.listen. (package:route/client.dart:102:15)

Breaking on exception: type 'UrlPattern' is not a subtype of type 'String' of 'url'.

Exception: type 'UrlPattern' is not a subtype of type 'String' of 'url'. _gotoOtherScreen (http://127.0.0.1:3030/test/web/main.dart:18:27)

How is the Route API supposed to be used? What am I doing wrong?

Solution

The following is the updated code that solves the above issues:

urls.dart

library urls;

import 'package:route/url_pattern.dart';

final homeUrl = new UrlPattern(r'(.*)/');
final homeUrlWithFile = new UrlPattern(r'(.*)/main.html');
final otherScreenUrl = new UrlPattern(r'(.*)/other_screen');

main.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div id="sample_container_id">
      <a href="/other_screen">click me!!</a>
    </div>

    <script type="application/dart" src="main.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

main.dart

import 'dart:html';
import 'package:route/client.dart';

import 'urls.dart';


void main() {
  var router = new Router()
    ..addHandler(homeUrl, _showHome)
    ..addHandler(homeUrlWithFile, _showHome)
    ..addHandler(otherScreenUrl, _showOtherScreen)
    ..listen();
}

_showHome(String path) {
  var e = querySelector("#other_element");
  if (e != null) e.remove();
}

_showOtherScreen(String path) {
  querySelector("#sample_container_id")
    ..append(new SpanElement()
      ..innerHtml = "now in other screen"
      ..id = "other_element");
}