examples/client-side-router.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Router example</title>
</head>
<body>

<p>Try and replace me when the router runs!</p>

<script src="../dist/router.umd.js"></script>
<script>

  router({

    "/home": params => {
        document.body.innerHTML = "HOMEPAGE";
        console.log("HOME PAGE", params)
    },

    "/user/:userId/tab/:tabId": params => {
        document.body.innerHTML = `Profile id: ${params.userId}, Tab: ${params.tabId}`;
        console.log(`Profile userId: ${params.userId}`)
    },

    "/user/:userId": params => {
        document.body.innerHTML = "PROFILE" + `<br><pre>${JSON.stringify(params)}</pre>`;
        console.log("PROFILE PAGE", params)
    }

  })

  // How to bind the router to URL changes in the browser:

  // 1. capture link clicks for links such as  <a href="#/profile/1">some text</a>
  window.addEventListener(
    "click",
    function handleLink(e) {
      if (!e.target.matches("a")) return
      if (!e.target.href.matches(/^#/)) return
      e.preventDefault()
      location.hash = e.target.hash
    },
    false
  )

  // 2. monitor changes to window.location.hash,
  // run the router when it changes
  window.addEventListener(
    "hashchange",
    function(e) {
      router.href(window.location.hash)
    },
    false
  )

</script>
</body>
</html>