Repository: Rezact/Rezact (ts)

Issue:
Add title property to route config
```javascript
{
      path: "/",
      title: 'Home',
    }
```
Pass {router} prop into page components
This will be a light refactor, but instead of passing routeParams and router_outlet as props, we should pass a single router prop that has everything:

```javascript
{
  route: {path, param, data, meta}
  outlet,
  go: //method, Traverses history in a given direction.
  push: //metjod Navigates to a location. In the case of an HTML5 History implementation, this will call history.pushState to effectively change the URL,
  replace: //method, Same as push but performs a history.replaceState instead of history.pushState,
...etc...
}
```

Pull request:
Midnight router improvements
Close #58
Close #53 
Close #64 
See Review below for details

Patch:
diff --git a/src/components/appRouter.ts b/src/components/appRouter.ts
index 55ba955..1e7d5ef 100644
--- a/src/components/appRouter.ts
+++ b/src/components/appRouter.ts
@@ -130,19 +130,23 @@ const routes = [
   {
     path: "/users2",
     component: () => import("src/examples/NestedRoutes/Users"),
+    title: "Users Test 2",
   },
   {
     path: "/users2/:id",
     component: () => import("src/examples/NestedRoutes/UsersId"),
+    title: "Users ID Test 2",
     children: [
       {
         path: "/settings",
         component: () => import("src/examples/NestedRoutes/UsersIdSettings"),
+        title: "Users Settings Test 2",
       },
       {
         path: "/settings/*",
         component: () =>
           import("src/examples/NestedRoutes/UsersIdSettingsWildCard"),
+        title: "Users Catch AllTest 2",
       },
     ],
   },
@@ -153,11 +157,13 @@ const routes = [
         path: "/:id",
         component: () =>
           import("src/examples/RouteWithPathParams/AmbiguousTest1"),
+        title: "Payments Test 2",
       },
       {
         path: "/ach/:id",
         component: () =>
           import("src/examples/RouteWithPathParams/AmbiguousTest2"),
+        title: "ACH Test 2",
       },
     ],
   },
diff --git a/src/examples/Layout/nestedLayout.tsx b/src/examples/Layout/nestedLayout.tsx
index b4e9887..2069712 100644
--- a/src/examples/Layout/nestedLayout.tsx
+++ b/src/examples/Layout/nestedLayout.tsx
@@ -1,15 +1,21 @@
-// import { xCreateElement } from "src/lib/rezact";
 import { MasterLayout } from "./masterLayout";
 
-export function MyLayout({ router_outlet }: any) {
+export function MyLayout({ router }: any) {
+  const { $route } = router;
   return (
     <MasterLayout>
       <h1>Layout</h1>
       <ul>
-        <li>
+        <li class={$route === "/" ? "active" : ""}>
           <a href="/">Home</a>
         </li>
-        <li>
+        <li
+          class={
+            $route === "/array-state-persistent-across-route-changes"
+              ? "active"
+              : ""
+          }
+        >
           <a href="/array-state-persistent-across-route-changes">
             Home (Persistent Toggle States)
           </a>
@@ -17,7 +23,7 @@ export function MyLayout({ router_outlet }: any) {
         <li>
           <a href="/benchmark">Benchmark</a>
         </li>
-        <li>
+        <li class={$route === "/hello-world" ? "active" : ""}>
           <a href="/hello-world">Hello World</a>
         </li>
         <li>
@@ -26,7 +32,7 @@ export function MyLayout({ router_outlet }: any) {
         <li>
           <a href="/nested">Nested Children</a>
         </li>
-        <li>
+        <li class={$route === "/counter" ? "active" : ""}>
           <a href="/counter">Counter</a>
         </li>
         <li>
@@ -35,7 +41,7 @@ export function MyLayout({ router_outlet }: any) {
         <li>
           <a href="/list">List</a>
         </li>
-        <li>
+        <li class={$route === "/post/:id/something/:test" ? "active" : ""}>
           <a href="/post/asdf/something/qwer">Route Params</a>
         </li>
         <hr />
@@ -141,7 +147,7 @@ export function MyLayout({ router_outlet }: any) {
           <a href="/asdfasdfasdfasdf">A Route that does not exist</a>
         </li>
       </ul>
-      <div id="router-outlet-test">{router_outlet}</div>
+      <div id="router-outlet-test">{router.outlet}</div>
       <p>End Layout</p>
     </MasterLayout>
   );
diff --git a/src/examples/NestedRoutes/Users.tsx b/src/examples/NestedRoutes/Users.tsx
index ab4736d..63b7737 100644
--- a/src/examples/NestedRoutes/Users.tsx
+++ b/src/examples/NestedRoutes/Users.tsx
@@ -1,13 +1,13 @@
 import { MyLayout } from "../Layout/nestedLayout";
 import { Page } from "../DataFetching/DataFetching";
 
-export default function ({ routeParams, router_outlet }) {
+export default function ({ router }) {
   return (
     <div id="nested-routes-test-id">
       <h1>1. Users START</h1>
-      <p>ID: {routeParams.id || "No User Selected"}</p>
+      <p>ID: {router.params.id || "No User Selected"}</p>
       <Page />
-      {router_outlet}
+      {router.outlet}
       <Page />
       <p>1. Users END</p>
     </div>
diff --git a/src/examples/NestedRoutes/UsersId.tsx b/src/examples/NestedRoutes/UsersId.tsx
index 9735751..c1f43e9 100644
--- a/src/examples/NestedRoutes/UsersId.tsx
+++ b/src/examples/NestedRoutes/UsersId.tsx
@@ -1,13 +1,13 @@
 import { MyLayout } from "../Layout/nestedLayout";
 import { Page } from "../SimpleStringListState/SimpleStringList";
 
-export default function ({ routeParams, router_outlet }) {
+export default function ({ router }) {
   return (
     <>
       <h1>2. Users ID START</h1>
-      <p>ID: {routeParams.id}</p>
+      <p>ID: {router.params.id}</p>
       <Page />
-      {router_outlet}
+      {router.outlet}
       <Page />
       <p>2. Users ID END</p>
     </>
diff --git a/src/examples/NestedRoutes/UsersIdSettings.tsx b/src/examples/NestedRoutes/UsersIdSettings.tsx
index 0988669..191e509 100644
--- a/src/examples/NestedRoutes/UsersIdSettings.tsx
+++ b/src/examples/NestedRoutes/UsersIdSettings.tsx
@@ -1,14 +1,13 @@
 import { MyLayout } from "../Layout/nestedLayout";
 import { Page } from "../DataFetching/DataFetching";
 
-export default function ({ routeParams, router_outlet }) {
-  // console.log("asdf", router_outlet);
+export default function ({ router }) {
   return (
     <div>
       <h1>3. Users ID Settings START</h1>
-      <p>ID: {routeParams.id}</p>
+      <p>ID: {router.params.id}</p>
       <Page />
-      {router_outlet}
+      {router.outlet}
       <Page />
       <p>3. Users ID Settings END</p>
     </div>
diff --git a/src/examples/NestedRoutes/UsersIdSettingsWildCard.tsx b/src/examples/NestedRoutes/UsersIdSettingsWildCard.tsx
index 6410e2d..d4651bb 100644
--- a/src/examples/NestedRoutes/UsersIdSettingsWildCard.tsx
+++ b/src/examples/NestedRoutes/UsersIdSettingsWildCard.tsx
@@ -1,12 +1,15 @@
 import { MyLayout } from "../Layout/nestedLayout";
 import { Page } from "../SimpleStringListState/SimpleStringList";
 
-export default function ({ routeParams }) {
+export default function ({ router }) {
+  let { $rest } = router.params;
   return (
     <>
       <h1>4. Users ID Settings Wild Card</h1>
       <Page />
-      <p>ID: {routeParams.id}</p>
+      <p>ID: {router.params.id}</p>
+      <p>{$rest}</p>
+      <button onClick={() => ($rest = "wqer/qwer/qwer")}>Test</button>
       <Page />
     </>
   );
diff --git a/src/examples/RouteWithPathParams/index.tsx b/src/examples/RouteWithPathParams/index.tsx
index 1405d06..720cbd3 100644
--- a/src/examples/RouteWithPathParams/index.tsx
+++ b/src/examples/RouteWithPathParams/index.tsx
@@ -1,12 +1,17 @@
 // import { xCreateElement, xFragment } from "rezact";
 import { MyLayout } from "../Layout/nestedLayout";
 
-export default function (props) {
+export default function ({ router }) {
+  let { $id, $test } = router.params;
   return (
     <>
       <h1>Path Params Test</h1>
-      <p>ID: {props.routeParams.id}</p>
-      <p>Test Param: {props.routeParams.test}</p>
+      <p>ID: {$id}</p>
+      <p>Test Param: {$test}</p>
+      <button onClick={() => ($id = "test1id")}>Test 1</button>
+      <button onClick={() => ($test = "test2test")}>Test 2</button>
+      <button onClick={() => ($id = "test3id")}>Test 3</button>
+      <button onClick={() => ($test = "test4test")}>Test 4</button>
     </>
   );
 }
diff --git a/src/lib/rezact/router.ts b/src/lib/rezact/router.ts
index c9e4610..af8bf84 100644
--- a/src/lib/rezact/router.ts
+++ b/src/lib/rezact/router.ts
@@ -1,6 +1,9 @@
 import { render } from "rezact";
 import { Signal } from "./signals";
 
+export const $currentRoute = new Signal("") as unknown as string;
+export const $currentPath = new Signal("") as unknown as string;
+
 function isPromise(value) {
   return Boolean(value && typeof value.then === "function");
 }
@@ -11,6 +14,13 @@ function copyNextRoute(nextRoute) {
     ? new URL(nextRoute)
     : new URL(nextRoute, window.location.origin)) as unknown as routeIF;
 
+  ($currentRoute as any).set(nextRoute.route || "/");
+  ($currentPath as any).set(newURLObj.pathname);
+
+  newURLObj.route = nextRoute.route || "/";
+  newURLObj.$route = $currentRoute;
+  newURLObj.$pathname = $currentPath;
+
   newURLObj.params = nextRoute.params;
   newURLObj.stack = nextRoute.stack;
   newURLObj.currentNode = nextRoute.currentNode;
@@ -24,6 +34,8 @@ class RouteNode {
   wildcardHandler: any = null;
   router_outlet: Signal<Element>;
   nestedRoot: boolean;
+  partName: string;
+  title: string;
   constructor() {
     this.handlers = {};
     this.children = new Map();
@@ -41,9 +53,13 @@ interface routeIF {
   href: string;
   origin: string;
   pathname: string;
+  $pathname: any;
   port: string;
   protocol: string;
   search: string;
+  builtPath: string;
+  route: string;
+  $route: any;
   params: any;
   stack: any;
   currentNode: any;
@@ -56,9 +72,13 @@ const defaultRouteObj: routeIF = {
   href: "",
   origin: "",
   pathname: "",
+  $pathname: new Signal(""),
   port: "",
   protocol: "",
   search: "",
+  builtPath: "",
+  route: "",
+  $route: new Signal(""),
   params: {},
   stack: [],
   currentNode: null,
@@ -115,7 +135,6 @@ export class TrieRouter {
   }
 
   routeChanged(path = null) {
-    console.log(path);
     if (path instanceof PopStateEvent) this.popState = true;
     const url = path || window.location.pathname;
 
@@ -132,7 +151,10 @@ export class TrieRouter {
   addRoutesFromConfig(config, parentPath = "") {
     config.forEach((route) => {
       const currentPath = `${parentPath}${route.path}`;
-      if (route.component) this.addRoute(currentPath, route.component);
+      if (route.component)
+        this.addRoute(currentPath, route.component, false, {
+          title: route.title,
+        });
 
       if (route.children && route.children.length > 0) {
         this.addRoutesFromConfig(route.children, currentPath);
@@ -140,7 +162,7 @@ export class TrieRouter {
     });
   }
 
-  addRoute(path, callback, nestedRoot = false) {
+  addRoute(path, callback, nestedRoot = false, opts: any = {}) {
     const parts = path.split("/").filter(Boolean);
     let firstPartRootSet = false;
     let currentNode = this.root;
@@ -149,11 +171,15 @@ export class TrieRouter {
       if (part.startsWith(":")) {
         if (!currentNode.dynamicChild) {
           currentNode.dynamicChild = new RouteNode();
+          currentNode.dynamicChild.title = opts.title;
+          currentNode.dynamicChild.partName = `/${part}`;
           currentNode.dynamicChild.isDynamic = part.slice(1);
         }
         currentNode = currentNode.dynamicChild;
       } else if (part.startsWith("*")) {
         currentNode.wildcardHandler = new RouteNode();
+        currentNode.wildcardHandler.title = opts.title;
+        currentNode.wildcardHandler.partName = `/${part}`;
         currentNode.wildcardHandler.isDynamic = part.slice(1);
         currentNode.wildcardHandler.handlers.GET = callback;
         currentNode.wildcardHandler.nestedRoot = nestedRoot;
@@ -161,6 +187,8 @@ export class TrieRouter {
       } else {
         if (!currentNode.children.has(part)) {
           currentNode.children.set(part, new RouteNode());
+          currentNode.children.get(part).title = opts.title;
+          currentNode.children.get(part).partName = `/${part}`;
         }
         currentNode = currentNode.children.get(part);
       }
@@ -172,11 +200,13 @@ export class TrieRouter {
     currentNode.nestedRoot = currentNode.nestedRoot || nestedRoot;
   }
 
-  getNextRoute(path): routeIF {
+  getNextRoute(path, paramID = null, paramVal = null): routeIF {
     path = this.popState ? window.location.pathname : path;
     const parts = path.split("/").filter(Boolean);
     let currentNode = this.root;
 
+    let route = "";
+    let builtPath = "";
     let params = {};
     let stack = [];
     let partIdx = 0;
@@ -187,19 +217,43 @@ export class TrieRouter {
 
       if (currentNode.children.has(part)) {
         currentNode = currentNode.children.get(part);
+        route += currentNode.partName;
+        builtPath += `/${part}`;
       } else if (currentNode.dynamicChild) {
-        params[currentNode.dynamicChild.isDynamic] = part;
+        const paramName = currentNode.dynamicChild.isDynamic;
+        const partOverride = paramID === paramName ? paramVal : null;
+        if (!paramID) {
+          params[paramName] = part;
+          params[`$${paramName}`] = new Signal(part);
+          params[`$${paramName}`].subscribe((val) => {
+            const newURL = this.getNextRoute(location.pathname, paramName, val);
+            val !== part && history.pushState({}, "", newURL.builtPath);
+          });
+        }
+
         currentNode = currentNode.dynamicChild;
+        route += currentNode.partName;
+        builtPath += `/${partOverride || part}`;
       } else if (currentNode.wildcardHandler) {
-        params[currentNode.wildcardHandler.isDynamic || "rest"] = parts
-          .slice(partIdx)
-          .join("/");
+        const paramName = currentNode.wildcardHandler.isDynamic || "rest";
+        const partOverride = paramID === paramName ? paramVal : null;
+        if (!paramID) {
+          params[paramName] = parts.slice(partIdx).join("/");
+          params[`$${paramName}`] = new Signal(parts.slice(partIdx).join("/"));
+          params[`$${paramName}`].subscribe((val) => {
+            const newURL = this.getNextRoute(location.pathname, paramName, val);
+            val !== part && history.pushState({}, "", newURL.builtPath);
+          });
+        }
         currentNode = currentNode.wildcardHandler;
+        route += currentNode.partName;
+        builtPath += `/${partOverride || part}`;
         break; // wildcard matches the rest of the route, so return
       } else {
         currentNode = this.noRoute(this);
         break;
       }
+
       partIdx++;
     }
 
@@ -208,6 +262,8 @@ export class TrieRouter {
       window.location.origin
     ) as unknown as routeIF;
 
+    newURLObj.route = route;
+    newURLObj.builtPath = builtPath;
     newURLObj.params = params;
     newURLObj.stack = stack;
     newURLObj.currentNode = currentNode;
@@ -219,16 +275,16 @@ export class TrieRouter {
     const pathObj = typeof path === "object";
     let nextRouteObj = pathObj ? path : this.getNextRoute(path);
 
-    let { stack, params, currentNode } = nextRouteObj;
+    let { currentNode } = nextRouteObj;
     this.currentRoute = copyNextRoute(nextRouteObj);
     !this.popState && history.pushState({}, "", nextRouteObj.pathname);
 
     this.popState = false;
     const handler = currentNode.handlers.GET;
     if (handler) {
-      if (currentNode.nestedRoot) stack = [];
-      stack.push(currentNode);
-      this.renderFunc(stack, params);
+      if (currentNode.nestedRoot) this.currentRoute.stack = [];
+      this.currentRoute.stack.push(currentNode);
+      this.renderFunc(this.currentRoute);
     } else {
       return this.noRoute(this);
     }
@@ -251,7 +307,9 @@ export function useRouter(app = null, config: any = {}) {
   let router_outlet = new Signal(document.createElement("span"));
 
   return new TrieRouter({
-    render: async (stack, params) => {
+    render: async (router) => {
+      if (router.currentNode.title) document.title = router.currentNode.title;
+      const { stack } = router;
       const routePromises = stack.map((node) => node.handlers.GET());
       const routes = await Promise.allSettled(routePromises);
       const pages = routes.map(({ status, reason, value }: any) =>
@@ -269,10 +327,9 @@ export function useRouter(app = null, config: any = {}) {
         if (nextItem) {
           const mod = pages[i + 1];
           const component = mod.Page || mod.default;
-          render(thisItem.router_outlet, component, {
-            routeParams: params,
-            router_outlet: nextItem.router_outlet,
-          });
+
+          router.outlet = nextItem.router_outlet;
+          render(thisItem.router_outlet, component, { router });
         }
       }
 
@@ -280,32 +337,24 @@ export function useRouter(app = null, config: any = {}) {
       const component = mod.Page || mod.default;
       if (mod.Layout) {
         if (currentLayout === mod.Layout) {
-          render(router_outlet, component, {
-            routeParams: params,
-            router_outlet: stack[0].router_outlet,
-          });
+          router.outlet = stack[0].router_outlet;
+          render(router_outlet, component, { router });
         } else {
           currentLayout = mod.Layout;
 
-          render(router_outlet, component, {
-            routeParams: params,
-            router_outlet: stack[0].router_outlet,
-          });
+          router.outlet = stack[0].router_outlet;
+          render(router_outlet, component, { router });
 
-          render(app, (props) => mod.Layout(props), {
-            router_outlet,
-            routeParams: params,
-          });
+          router.outlet = router_outlet;
+          render(app, (props) => mod.Layout(props), { router });
         }
       } else {
         currentLayout = null;
 
         const mod = pages[0];
         const component = mod.Page || mod.default;
-        render(app, component, {
-          routeParams: params,
-          router_outlet: stack[0].router_outlet,
-        });
+        router.outlet = stack[0].router_outlet;
+        render(app, component, { router });
       }
     },
   });


Test patch:
diff --git a/src/__snapshots__/router.test.js.snap b/src/__snapshots__/router.test.js.snap
index e62cbc1..b8eaab5 100644
--- a/src/__snapshots__/router.test.js.snap
+++ b/src/__snapshots__/router.test.js.snap
@@ -16,9 +16,9 @@ exports[`Router Tests Suite > CONFIG BASED - Nested Route Level 3 1`] = `"<h1>1.
 
 exports[`Router Tests Suite > CONFIG BASED - Nested Route Level 3 2`] = `"<h1>1. Users START</h1><p>ID: 953test</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>2. Users ID START</h1><p>ID: 953test</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--start map--><div><h1>3. Users ID Settings START</h1><p>ID: 953test</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><span></span><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>3. Users ID Settings END</p></div><!--end map--><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>2. Users ID END</p><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>1. Users END</p>"`;
 
-exports[`Router Tests Suite > CONFIG BASED - Nested Route Level 4 1`] = `"<h1>1. Users START</h1><p>ID: 123</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>2. Users ID START</h1><p>ID: 123</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--start map--><div><h1>3. Users ID Settings START</h1><p>ID: 123</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>4. Users ID Settings Wild Card</h1><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>ID: 123</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>3. Users ID Settings END</p></div><!--end map--><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>2. Users ID END</p><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>1. Users END</p>"`;
+exports[`Router Tests Suite > CONFIG BASED - Nested Route Level 4 1`] = `"<h1>1. Users START</h1><p>ID: 123</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>2. Users ID START</h1><p>ID: 123</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--start map--><div><h1>3. Users ID Settings START</h1><p>ID: 123</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>4. Users ID Settings Wild Card</h1><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>ID: 123</p><p>all/wild/card/stuff</p><button>Test</button><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>3. Users ID Settings END</p></div><!--end map--><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>2. Users ID END</p><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>1. Users END</p>"`;
 
-exports[`Router Tests Suite > CONFIG BASED - Nested Route Level 4 2`] = `"<h1>1. Users START</h1><p>ID: 953test</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>2. Users ID START</h1><p>ID: 953test</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--start map--><div><h1>3. Users ID Settings START</h1><p>ID: 953test</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>4. Users ID Settings Wild Card</h1><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>ID: 953test</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>3. Users ID Settings END</p></div><!--end map--><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>2. Users ID END</p><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>1. Users END</p>"`;
+exports[`Router Tests Suite > CONFIG BASED - Nested Route Level 4 2`] = `"<h1>1. Users START</h1><p>ID: 953test</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>2. Users ID START</h1><p>ID: 953test</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--start map--><div><h1>3. Users ID Settings START</h1><p>ID: 953test</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>4. Users ID Settings Wild Card</h1><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>ID: 953test</p><p>all/wild/card/stuff</p><button>Test</button><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>3. Users ID Settings END</p></div><!--end map--><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>2. Users ID END</p><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>1. Users END</p>"`;
 
 exports[`Router Tests Suite > First Render Home Page 1`] = `
 "<!--start map--><h1>Hello World TEST</h1><label for=\\"test-input\\">Test Input</label><input id=\\"test-input\\"><button>asdf</button><div><style>
@@ -150,9 +150,9 @@ exports[`Router Tests Suite > Nested Route Level 3 1`] = `"<h1>1. Users START</h
 
 exports[`Router Tests Suite > Nested Route Level 3 2`] = `"<h1>1. Users START</h1><p>ID: 953test</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>2. Users ID START</h1><p>ID: 953test</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--start map--><div><h1>3. Users ID Settings START</h1><p>ID: 953test</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><span></span><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>3. Users ID Settings END</p></div><!--end map--><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>2. Users ID END</p><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>1. Users END</p>"`;
 
-exports[`Router Tests Suite > Nested Route Level 4 1`] = `"<h1>1. Users START</h1><p>ID: 123</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>2. Users ID START</h1><p>ID: 123</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--start map--><div><h1>3. Users ID Settings START</h1><p>ID: 123</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>4. Users ID Settings Wild Card</h1><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>ID: 123</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>3. Users ID Settings END</p></div><!--end map--><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>2. Users ID END</p><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>1. Users END</p>"`;
+exports[`Router Tests Suite > Nested Route Level 4 1`] = `"<h1>1. Users START</h1><p>ID: 123</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>2. Users ID START</h1><p>ID: 123</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--start map--><div><h1>3. Users ID Settings START</h1><p>ID: 123</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>4. Users ID Settings Wild Card</h1><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>ID: 123</p><p>all/wild/card/stuff</p><button>Test</button><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>3. Users ID Settings END</p></div><!--end map--><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>2. Users ID END</p><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>1. Users END</p>"`;
 
-exports[`Router Tests Suite > Nested Route Level 4 2`] = `"<h1>1. Users START</h1><p>ID: 953test</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>2. Users ID START</h1><p>ID: 953test</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--start map--><div><h1>3. Users ID Settings START</h1><p>ID: 953test</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>4. Users ID Settings Wild Card</h1><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>ID: 953test</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>3. Users ID Settings END</p></div><!--end map--><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>2. Users ID END</p><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>1. Users END</p>"`;
+exports[`Router Tests Suite > Nested Route Level 4 2`] = `"<h1>1. Users START</h1><p>ID: 953test</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>2. Users ID START</h1><p>ID: 953test</p><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--start map--><div><h1>3. Users ID Settings START</h1><p>ID: 953test</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map--><h1>4. Users ID Settings Wild Card</h1><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>ID: 953test</p><p>all/wild/card/stuff</p><button>Test</button><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>3. Users ID Settings END</p></div><!--end map--><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><p>2. Users ID END</p><!--end map--><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><p>1. Users END</p>"`;
 
 exports[`Router Tests Suite > Route Guard Cancels Navigation - Simple String List Route 1`] = `"<!--start map--><h1>Simple String List</h1><!--start map--><div dataval=\\"Jack\\"><input></div><div dataval=\\"Jill\\"><input></div><div dataval=\\"John\\"><input></div><div dataval=\\"Jane\\"><input></div><!--end map--><!--start map--><div>Jack</div><div>Jill</div><div>John</div><div>Jane</div><!--end map--><!--signal--><!--end map-->"`;
 
diff --git a/src/examples/RouteWithPathParams/AmbiguousTest1.tsx b/src/examples/RouteWithPathParams/AmbiguousTest1.tsx
index 336aabf..8a5c0bb 100644
--- a/src/examples/RouteWithPathParams/AmbiguousTest1.tsx
+++ b/src/examples/RouteWithPathParams/AmbiguousTest1.tsx
@@ -1,10 +1,18 @@
 import { MyLayout } from "../Layout/nestedLayout";
 
-export default function ({ routeParams }) {
+export default function ({ router }) {
+  let { $id } = router.params;
   return (
     <>
       <h1>Ambiguous Test 1</h1>
-      <p>ID: {routeParams.id}</p>
+      <p>ID: {$id}</p>
+      <button
+        onClick={() => {
+          $id = "test";
+        }}
+      >
+        Test
+      </button>
     </>
   );
 }
diff --git a/src/examples/RouteWithPathParams/AmbiguousTest2.tsx b/src/examples/RouteWithPathParams/AmbiguousTest2.tsx
index f4a2ef9..03e7e2f 100644
--- a/src/examples/RouteWithPathParams/AmbiguousTest2.tsx
+++ b/src/examples/RouteWithPathParams/AmbiguousTest2.tsx
@@ -1,10 +1,10 @@
 import { MyLayout } from "../Layout/nestedLayout";
 
-export default function ({ routeParams }) {
+export default function ({ router }) {
   return (
     <>
       <h1>Ambiguous Test 2</h1>
-      <p>ID: {routeParams.id}</p>
+      <p>ID: {router.params.id}</p>
     </>
   );
 }
diff --git a/src/router.test.js b/src/router.test.js
index 2a28dcf..756532a 100644
--- a/src/router.test.js
+++ b/src/router.test.js
@@ -3,6 +3,9 @@ import { screen, waitFor } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
 
 const currentFetch = global.fetch;
+const currentHistory = global.history;
+const historyState = [];
+
 beforeAll(() => {
   global.fetch = async () => {
     return {
@@ -15,10 +18,17 @@ beforeAll(() => {
       },
     };
   };
+  global.history = {
+    pushState: (...args) => {
+      location.pathname = args[2];
+      historyState.push(args);
+    },
+  };
 });
 
 afterAll(() => {
   global.fetch = currentFetch;
+  global.history = currentHistory;
 });
 const user = userEvent.setup();
 let router = null;
@@ -27,7 +37,7 @@ describe("Router Tests Suite", () => {
   it("First Render Home Page", async () => {
     document.body.innerHTML = `<div id="app"></div>`;
     const { router: _router } = await import("./components/appRouter");
-    _router.routeRequest(window.location.pathname);
+    _router.routeRequest("/");
     router = _router;
 
     const allHeaders = await screen.findAllByRole("heading", {
@@ -65,6 +75,8 @@ describe("Router Tests Suite", () => {
     await waitFor(() =>
       expect(counterBtns[0].textContent).toBe("Clicked 1 time")
     );
+
+    expect(links[0].parentElement.classList.toString()).toBe("active");
   });
 
   it("Loads the Home Page", async () => {
@@ -123,6 +135,38 @@ describe("Router Tests Suite", () => {
     expect(paragraphs).toHaveLength(3);
     expect(paragraphs[0].textContent).toBe("ID: asdf");
     expect(paragraphs[1].textContent).toBe("Test Param: qwer");
+
+    expect(location.pathname).toBe("/post/asdf/something/qwer");
+    let testButtons = screen.getAllByRole("button");
+    expect(testButtons).toHaveLength(4);
+
+    testButtons[0].click();
+    expect(paragraphs[0].textContent).toBe("ID: test1id");
+    expect(paragraphs[1].textContent).toBe("Test Param: qwer");
+    expect(location.pathname).toBe("/post/test1id/something/qwer");
+
+    testButtons[1].click();
+    expect(paragraphs[0].textContent).toBe("ID: test1id");
+    expect(paragraphs[1].textContent).toBe("Test Param: test2test");
+    expect(location.pathname).toBe("/post/test1id/something/test2test");
+
+    testButtons[2].click();
+    expect(paragraphs[0].textContent).toBe("ID: test3id");
+    expect(paragraphs[1].textContent).toBe("Test Param: test2test");
+    expect(location.pathname).toBe("/post/test3id/something/test2test");
+
+    expect(links[0].parentElement.classList.toString()).toBe("active");
+
+    testButtons[3].click();
+    expect(paragraphs[0].textContent).toBe("ID: test3id");
+    expect(paragraphs[1].textContent).toBe("Test Param: test4test");
+    expect(location.pathname).toBe("/post/test3id/something/test4test");
+
+    await user.click(links[0]);
+    const paragraphs2 = document.querySelectorAll("p");
+    expect(paragraphs2[0].textContent).toBe("ID: asdf");
+    expect(paragraphs2[1].textContent).toBe("Test Param: qwer");
+    expect(location.pathname).toBe("/post/asdf/something/qwer");
   });
 
   it("CONFIG BASED - Ambiguous Route/Params Link Works 1", async () => {
@@ -141,6 +185,14 @@ describe("Router Tests Suite", () => {
     const paragraphs = document.querySelectorAll("p");
     expect(paragraphs).toHaveLength(2);
     expect(paragraphs[0].textContent).toBe("ID: config123");
+    expect(document.title).toBe("Payments Test 2");
+
+    expect(location.pathname).toBe("/payments2/config123");
+    let testButton = screen.getAllByRole("button", { name: /test/i });
+    expect(testButton).toHaveLength(1);
+    testButton[0].click();
+    await waitFor(() => expect(paragraphs[0].textContent).toBe("ID: test"));
+    expect(location.pathname).toBe("/payments2/test");
   });
 
   it("CONFIG BASED - Ambiguous Route/Params Link Works 2", async () => {
@@ -159,6 +211,7 @@ describe("Router Tests Suite", () => {
     const paragraphs = document.querySelectorAll("p");
     expect(paragraphs).toHaveLength(2);
     expect(paragraphs[0].textContent).toBe("ID: config321");
+    expect(document.title).toBe("ACH Test 2");
   });
 
   it("CONFIG BASED - Nested Route Level 1", async () => {
@@ -174,6 +227,7 @@ describe("Router Tests Suite", () => {
     await delay(200);
     const testDiv2 = document.getElementById("nested-routes-test-id");
     expect(testDiv2.innerHTML).toMatchSnapshot();
+    expect(document.title).toBe("Users Test 2");
   });
 
   it("CONFIG BASED - Nested Route Level 3", async () => {
@@ -189,6 +243,7 @@ describe("Router Tests Suite", () => {
     await delay(200);
     const testDiv2 = document.getElementById("nested-routes-test-id");
     expect(testDiv2.innerHTML).toMatchSnapshot();
+    expect(document.title).toBe("Users Settings Test 2");
   });
 
   it("CONFIG BASED - Nested Route Level 2", async () => {
@@ -204,6 +259,7 @@ describe("Router Tests Suite", () => {
     await delay(200);
     const testDiv2 = document.getElementById("nested-routes-test-id");
     expect(testDiv2.innerHTML).toMatchSnapshot();
+    expect(document.title).toBe("Users ID Test 2");
   });
 
   it("CONFIG BASED - Nested Route Level 4", async () => {
@@ -219,6 +275,7 @@ describe("Router Tests Suite", () => {
     await delay(200);
     const testDiv2 = document.getElementById("nested-routes-test-id");
     expect(testDiv2.innerHTML).toMatchSnapshot();
+    expect(document.title).toBe("Users Catch AllTest 2");
   });
 
   it("CONFIG BASED - Nested Route Level 1 Again", async () => {
@@ -234,6 +291,7 @@ describe("Router Tests Suite", () => {
     await delay(100);
     const testDiv2 = document.getElementById("nested-routes-test-id");
     expect(testDiv2.innerHTML).toMatchSnapshot();
+    expect(document.title).toBe("Users Test 2");
   });
 
   it("Ambiguous Route/Params Link Works 1", async () => {
@@ -252,6 +310,12 @@ describe("Router Tests Suite", () => {
     const paragraphs = document.querySelectorAll("p");
     expect(paragraphs).toHaveLength(2);
     expect(paragraphs[0].textContent).toBe("ID: 123");
+    expect(location.pathname).toBe("/payments/123");
+    let testButton = screen.getAllByRole("button", { name: /test/i });
+    expect(testButton).toHaveLength(1);
+    testButton[0].click();
+    await waitFor(() => expect(paragraphs[0].textContent).toBe("ID: test"));
+    expect(location.pathname).toBe("/payments/test");
   });
 
   it("Ambiguous Route/Params Link Works 2", async () => {
@@ -379,7 +443,7 @@ describe("Router Tests Suite", () => {
   });
 
   it("Router Back Home (Toggle Button State is lost)", async () => {
-    router.routeRequest(window.location.pathname);
+    router.routeRequest("/");
 
     const allHeaders = await screen.findAllByRole("heading", {
       name: /hello world testhello/i,