Routing that handles params

I really should have just used react router

js/Page.js

@@ -1,14 +1,18 @@
 class Page {
   async renderPage() {
-    if (this.template) {
-      this.parent.innerHTML = await templateContent()
-    }
+    try {
+      if (this.template) {
+        this.parent.innerHTML = await this.templateContent()
+      }
 
-    document.title = this.title
+      document.title = this.title
 
-    document
-      .querySelector('meta[name="description"]')
-      .setAttribute("content", this.description)
+      document
+        .querySelector('meta[name="description"]')
+        .setAttribute("content", this.description)
+    } catch (e) {
+      console.error(`Error Rendering Page (${this.title}}: ${e.message}`)
+    }
   }
 
   async templateContent() {

js/Router.js

@@ -4,23 +4,59 @@ class Router {
   static routes = {
     404: FoodPage, // NotFoundPage,
     "/": FoodPage, // HomePage,
-    "/food": FoodPage,
+    "/food": FoodPage
   }
 
-  static async route() {
-    var location = window.location.hash.replace("#", "")
-    if (location.length == 0) {
-      location = "/"
-    }
+  static parseUrl() {
+    const hash = window.location.hash.replace("#", "")
+    const [path, ...paramPairs] = hash.split("?")
+    const params = paramPairs
+      .join("?")
+      .split("&")
+      .reduce((acc, param) => {
+        const [key, value] = param.split("=")
+        acc[key] = value
+        return acc
+      }, {})
 
-    const page = this.routes[location] || this.routes["404"]
+    return { path: path || "/", params }
+  }
 
+  static matchRoute(path, additionalParams = {}) {
+    for (const route in this.routes) {
+      const routePattern = route.replace(/:\w+/g, "([^/]+)")
+      const regex = new RegExp(`^${routePattern}$`)
+      const match = path.match(regex)
+      if (match) {
+        const paramValues = match.slice(1)
+        const paramKeys = (route.match(/:\w+/g) || []).map((key) =>
+          key.substring(1),
+        )
+        const params = paramKeys.reduce((acc, key, index) => {
+          acc[key] = paramValues[index]
+          return acc
+        }, additionalParams)
+        return new this.routes[route](
+          document.getElementById("content"),
+          params,
+        )
+      }
+    }
+    return new this.routes["404"](
+      document.getElementById("content"),
+      additionalParams,
+    )
+  }
+
+  static async route() {
     try {
-      const pageRenderer = new page(document.getElementById("content"))
+      const { path, urlParams } = this.parseUrl()
+      const page = this.matchRoute(path, urlParams)
 
-      pageRenderer.render()
+      page.render()
     } catch (e) {
-      console.error(`Error Rendering ${page}: ${e.message}`)
+      console.error(`Error Routing [${window.location.hash}]: ${e.message}`)
+      console.error(e.location)
     }
   }
 

pages/food/FoodPage.js

@@ -42,7 +42,9 @@ class FoodPage extends Page {
   }
 
   async render() {
+    console.log("render()")
     await this.renderPage()
+    console.log("rendered page")
 
     const quickActions = document.getElementById("quickActions")