@aaronshaf/html-router

Drop-in router.

Usage

Hash router

<script src="https://unpkg.com/@aaronshaf/html-router@1/hash.js" type="module"></script>

Render first match (example)

<ul>
  <li><a href="#/foo">Foo</a></li>
  <li><a href="#/bar">Bar</a></li>
  <li><a href="#/baz">Baz</a></li>
</ul>

<hash-switch>
  <template data-path="/foo">
    <h1>Foo</h1>
  </template>

  <template data-path="/bar">
    <h1>Bar</h1>
  </template>

  <template data-path="(.*)">
    <h1>Not found</h1>
  </template>
</hash-switch>

Standalone routes (example)

<ul>
  <li><a href="#/">Home</a></li>
  <li><a href="#/foo">Foo</a></li>
  <li><a href="#/foo/bar">Foo and Bar</a></li>
</ul>

<hash-route path="/">
  <h2>Home</h2>
</hash-route>

<hash-route path="/foo(.*)">
  <h2>Foo</h2>
</hash-route>

<hash-route path="/foo/bar">
  <h2>Bar</h2>
</hash-route>

Pathname router

<script src="https://unpkg.com/@aaronshaf/html-router@1/pathname.js" type="module"></script>

Render first match (example)

<ul>
  <li>
    <pushstate-link><a href="/foo">Foo</a></pushstate-link>
  </li>
  <li>
    <pushstate-link><a href="/bar">Bar</a></pushstate-link>
  </li>
  <li>
    <pushstate-link><a href="/baz">Baz</a></pushstate-link>
  </li>
</ul>

<pathname-switch>
  <template data-path="/foo">
    <h1>Foo</h1>
  </template>

  <template data-path="/bar">
    <h1>Bar</h1>
  </template>

  <template data-path="(.*)">
    <h1>Not found</h1>
  </template>
</pathname-switch>

Standalone routes (example)

<ul>
  <li>
    <pushstate-link><a href="/foo">Foo</a></pushstate-link>
  </li>
  <li>
    <pushstate-link><a href="/foo/bar">Foo & Bar</a></pushstate-link>
  </li>
</ul>

<pathname-route path="/foo(.*)">
  <h2>Foo</h2>
</pathname-route>

<pathname-route path="/foo/bar">
  <h2>Bar</h2>
</pathname-route>

Access match params

Custom elements that are children of a route or switch can access match data at this.match.

Prevent flash of undefined content

<style>
hash-switch:not(:defined),
pathname-switch:not(:defined) {
  visibility: hidden;
}
</style>

Web components polyfill

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2/webcomponents-loader.js"></script>