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");
}