fix(router): decode path for storing elements and slug as prop (#1304)

Let me know if this approach is ok. The change makes it so that id's
internally for routes are always decoded. This makes it so the prop is
decoded when it is passed. It also fixes the runtime error. The runtime
error happened when the id as being looked up in elements as decoded,
but internally stored as encoded, so our invalid element id error was
thrown.

fixes #1302

---------

Co-authored-by: Tyler <[email protected]>

Author: tylersayshi

e2e/create-pages.spec.ts

@@ -67,6 +67,13 @@ for (const mode of ['DEV', 'PRD'] as const) {
       ).toBeVisible();
     });
 
+    test("nested/cat's pajamas", async ({ page }) => {
+      await page.goto(`http://localhost:${port}/nested/cat's%20pajamas`);
+      await expect(
+        page.getByRole('heading', { name: "Dynamic: cat's pajamas" }),
+      ).toBeVisible();
+    });
+
     test('jump', async ({ page }) => {
       await page.goto(`http://localhost:${port}`);
       await page.click("a[href='/foo']");

packages/waku/src/router/client.ts

@@ -430,7 +430,7 @@ class CustomErrorHandler extends Component<
   }
 }
 
-const getRouteSlotId = (path: string) => 'route:' + path;
+const getRouteSlotId = (path: string) => 'route:' + decodeURIComponent(path);
 
 const handleScroll = () => {
   const { hash } = window.location;

packages/waku/src/router/define-router.ts

@@ -243,11 +243,12 @@ export function unstable_defineRouter(fns: {
     if (!pathConfigItem.specs.rootElementIsStatic || !skipIdSet.has('root')) {
       entries.root = rootElement;
     }
-    const routeId = ROUTE_SLOT_ID_PREFIX + pathname;
+    const decodedPathname = decodeURIComponent(pathname);
+    const routeId = ROUTE_SLOT_ID_PREFIX + decodedPathname;
     if (!pathConfigItem.specs.routeElementIsStatic || !skipIdSet.has(routeId)) {
       entries[routeId] = routeElement;
     }
-    entries[ROUTE_ID] = [pathname, query];
+    entries[ROUTE_ID] = [decodedPathname, query];
     entries[IS_STATIC_ID] = !!pathConfigItem.specs.isStatic;
     if (await has404()) {
       entries[HAS404_ID] = true;