@modern-helpers/router

minimalistic SPA router

Usage no npm install needed!

<script type="module">
  import modernHelpersRouter from 'https://cdn.skypack.dev/@modern-helpers/router';
</script>

README

@modern-helpers/router

Minimalistic router for modern web apps.

:book: Documentation

:arrow_upper_right: Demos

Features

Usage example

HTML

<a href="/hello">Say Hello</a>
<a href="/bye/">Say Goodbye</a>
<a href="/unknown-path">Wrong link</a>
<div id="outlet">default view</div>

JS

import { AbstractRouter } from "https://cdn.skypack.dev/@modern-helpers/router";
// or, using npm i @modern-helpers/router
// import { AbstractRouter } from "@modern-helpers/router";

const routerOutlet = document.getElementById("outlet");
function render(template) {
  routerOutlet.innerHTML = template;
}

const ROUTES = {
  "/": "<p>Home view</p>",
  "/hello": `<p>Hello World!</p>`,
  /** "directory" route for relative links */
  "/bye/": `<p>Good bye!</p>
    <p><a href="./soon">tell me more with a relative link</a></p>`,
  /** "child" route */
  "/bye/soon": `<p>Just a child route to say "see you soon".</p>`,
  /** default route */
  "/404": `<p>404: route not found</p>`,
};

class AppRouter extends AbstractRouter {
  async renderOrRedirect(path, options) {
    if (!Object.keys(ROUTES).includes(path)) {
      // redirection to the default route
      return ["/404", options];
    }

    render(ROUTES[path]);
  }
}

async function runRouter() {
  const appRouter = new AppRouter();

  // listen clicks and popstate on body
  // and run a first navigation using window.location.pathname
  await appRouter.run();
}

runRouter();