BauRouting.md

Hash based routing

This guide demonstrates a very simple router based on the hashchange event.

For a sophisticated router supporting nested views and asynchrounous loading, refer to bau-router

First of all, an event handler is defined, it intercepts the hashchange event. When a user clicks on an anchor link, the handler is triggered and set the window.location.hash to the pathnameState state. The correct view is then created and displayed:

const HomeView = () => div("Home View");
const ContectView = () => div("Contect View");
const NotFound = () => div("Not Found ", 404);

const router: any = {
  "/": HomeView,
  "/contact": ContectView,
};

const TestRouter = () => {
  const pathnameState = bau.state("/");
  window.addEventListener("hashchange", () => {
    pathnameState.val = window.location.hash.slice(1);
  });

  return article(
    h1("Router Simple with hashchange"),
    nav(
      a({ href: "#/" }, "Home"),
      " | ",
      a({ href: "#/contact" }, "Contact"),
      " | ",
      a({ href: "#/page-not-exist" }, "Other")
    ),
    () => {
      const View = router[pathnameState.val] || NotFound;
      return View();
    }
  );
};