NaviGo Javascript Router

by ethanpil

HTML

<script src="//unpkg.com/navigo"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<main class="container">
<nav>
  <ul>
    <li><strong>Acme Corp</strong></li>
  </ul>
  <ul>
    <li><a href="about" data-navigo>About</a></li>
    <li><a href="services" data-navigo>Services</a></li>
    <li><a href="products" data-navigo>Products</a></li>
  </ul>
</nav>

<article id="content">
</article>
</main>

JavaScript

window.addEventListener("load", () => {

  const router = new Navigo("/");
  const render = (content) =>
  (document.querySelector("#content").innerHTML = content);

  router
    .on("/home", (match) => {
    console.log(match);
    render("Home");
  })
	.on("about", (match) => {
    console.log(match);
    render("About");
  })
    .on("products", (match) => {
    console.log(match);
    render("Products " + JSON.stringify(match.params));
  })
    .on("services", (match) => {
    console.log(match);
    render("Services");
  })
    .notFound(() => {
    render("Not found");
  })
    .resolve();
   
   router.navigate("home");
    
});