client - sanitize urls, so we can match routes with nasty chars

packages/client/src/render/screenRouter.js

@@ -3,6 +3,18 @@ import appStore from "../state/store"
 import { parseAppIdFromCookie } from "./getAppId"
 
 export const screenRouter = ({ screens, onScreenSelected, window }) => {
+  function sanitize(url) {
+    return url
+      .split("/")
+      .map(part => {
+        // if parameter, then use as is
+        if (part.startsWith(":")) return part
+        return encodeURIComponent(part)
+      })
+      .join("/")
+      .toLowerCase()
+  }
+
   const makeRootedPath = url => {
     const hostname = window.location && window.location.hostname
     if (hostname) {
@@ -13,13 +25,16 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
       ) {
         const appId = parseAppIdFromCookie(window.document.cookie)
         if (url) {
-          if (url.startsWith(appId)) return url
+          const sanitizedUrl = sanitize(url)
-          return `/${appId}${url.startsWith("/") ? "" : "/"}${url}`
+          if (sanitizedUrl.startsWith(appId)) return sanitizedUrl
+          return `/${appId}${
+            sanitizedUrl.startsWith("/") ? "" : "/"
+          }${sanitizedUrl}`
         }
         return appId
       }
     }
-    return url
+    return sanitize(url)
   }
 
   const routes = screens.map(s => makeRootedPath(s.route))