Repository: Rezact/Rezact (ts)

Issue:
Router should allow Function Components Directly
```javascript
    {
      path: "/",
      component: () => import('./pages/Home'), 
// OR
      component: Home
    },
```

Pull request description:
close #54 allow use of components directly in router
close #54 

![image](https://github.com/Rezact/Rezact/assets/2927894/6686a93f-b377-4dd0-907b-b71be48a8243)


![image](https://github.com/Rezact/Rezact/assets/2927894/9a55fd92-ac0b-41d6-af26-ad1c3c5c9b00)


Patch:
diff --git a/src/components/appRouter.ts b/src/components/appRouter.ts
index 42a8c81..b4fe46a 100644
--- a/src/components/appRouter.ts
+++ b/src/components/appRouter.ts
@@ -1,8 +1,15 @@
 import { nestedRoot, useRouter } from "rezact/router";
+import { Page as FourOhFour } from "./404";
+import Users from "src/examples/NestedRoutes/Users";
+import UsersId from "src/examples/NestedRoutes/UsersId";
+import UsersIdSettings from "src/examples/NestedRoutes/UsersIdSettings";
+import UsersIdSettingsWildCard from "src/examples/NestedRoutes/UsersIdSettingsWildCard";
 
 const router = useRouter();
 
-router.addRoute("/404", () => import("./404"));
+// router.addRoute("/404", () => import("./404"));
+
+router.addRoute("/404", FourOhFour);
 
 router.addRoute(
   "/array-state-persistent-across-route-changes",
@@ -155,6 +162,28 @@ const routes = [
       },
     ],
   },
+  {
+    path: "/users3",
+    component: Users,
+    title: "Users Test 3",
+  },
+  {
+    path: "/users3/:id",
+    component: UsersId,
+    title: "Users ID Test 3",
+    children: [
+      {
+        path: "/settings",
+        component: UsersIdSettings,
+        title: "Users Settings Test 3",
+      },
+      {
+        path: "/settings/*",
+        component: () => UsersIdSettingsWildCard,
+        title: "Users Catch AllTest 3",
+      },
+    ],
+  },
   {
     path: "/payments2",
     children: [
diff --git a/src/examples/Layout/nestedLayout.tsx b/src/examples/Layout/nestedLayout.tsx
index f2f4cdd..5a9c7a7 100644
--- a/src/examples/Layout/nestedLayout.tsx
+++ b/src/examples/Layout/nestedLayout.tsx
@@ -97,6 +97,27 @@ export function MyLayout({ router }: routerProp) {
         </li>
         <hr />
 
+        <li>
+          <a href="/users3">DIRECT COMPONENT - Nested Routes /users</a>
+        </li>
+        <li>
+          <a href="/users3/direct123">
+            DIRECT COMPONENT - Nested Routes /users/:id
+          </a>
+        </li>
+        <li>
+          <a href="/users3/direct1234/settings">
+            DIRECT COMPONENT - Nested Routes /users/:id/settings
+          </a>
+        </li>
+        <li>
+          <a href="/users3/direct1235/settings/all/wild/card/stuff">
+            DIRECT COMPONENT - Nested Routes
+            /users/:id/settings/all/wild/card/stuff
+          </a>
+        </li>
+        <hr />
+
         <li>
           <a href="/mdx">MDX</a>
         </li>
diff --git a/src/examples/NestedRoutes/Users.tsx b/src/examples/NestedRoutes/Users.tsx
index 63b7737..b08b030 100644
--- a/src/examples/NestedRoutes/Users.tsx
+++ b/src/examples/NestedRoutes/Users.tsx
@@ -1,7 +1,7 @@
 import { MyLayout } from "../Layout/nestedLayout";
 import { Page } from "../DataFetching/DataFetching";
 
-export default function ({ router }) {
+export default function Users({ router }) {
   return (
     <div id="nested-routes-test-id">
       <h1>1. Users START</h1>
@@ -14,4 +14,6 @@ export default function ({ router }) {
   );
 }
 
+Users.Layout = MyLayout;
+
 export const Layout = MyLayout;
diff --git a/src/lib/rezact/router.ts b/src/lib/rezact/router.ts
index eb549a8..d17812e 100644
--- a/src/lib/rezact/router.ts
+++ b/src/lib/rezact/router.ts
@@ -332,8 +332,12 @@ export function useRouter(app = null, config: any = {}) {
     render: async (router: routeIF) => {
       if (router.currentNode.title) document.title = router.currentNode.title;
       const { stack } = router;
-      const routePromises = stack.map((node) => node.handlers.GET());
+      const routePromises = stack.map((node) => {
+        const test = node.handlers.GET({ router });
+        return isPromise(test) ? test : node.handlers.GET;
+      });
       const routes = await Promise.allSettled(routePromises);
+
       const pages = routes.map(({ status, reason, value }: any) =>
         status === "rejected" ? config.routeErrorComponent({ reason }) : value
       );
@@ -348,7 +352,7 @@ export function useRouter(app = null, config: any = {}) {
         const nextItem = stack[i + 1];
         if (nextItem) {
           const mod = pages[i + 1];
-          const component = mod.Page || mod.default;
+          const component = mod.Page || mod.default || mod;
 
           router.outlet = nextItem.router_outlet;
           render(thisItem.router_outlet, component, { router });
@@ -356,25 +360,26 @@ export function useRouter(app = null, config: any = {}) {
       }
 
       const mod = pages[0];
-      const component = mod.Page || mod.default;
-      if (mod.Layout) {
-        if (currentLayout === mod.Layout) {
+      const component = mod.Page || mod.default || mod;
+      const layout = mod.Layout || component.Layout;
+      if (layout) {
+        if (currentLayout === layout) {
           router.outlet = stack[0].router_outlet;
           render(router_outlet, component, { router });
         } else {
-          currentLayout = mod.Layout;
+          currentLayout = layout;
 
           router.outlet = stack[0].router_outlet;
           render(router_outlet, component, { router });
 
           router.outlet = router_outlet;
-          render(app, (props) => mod.Layout(props), { router });
+          render(app, (props) => layout(props), { router });
         }
       } else {
         currentLayout = null;
 
         const mod = pages[0];
-        const component = mod.Page || mod.default;
+        const component = mod.Page || mod.default || mod;
         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 b8eaab5..083cd78 100644
--- a/src/__snapshots__/router.test.js.snap
+++ b/src/__snapshots__/router.test.js.snap
@@ -20,6 +20,31 @@ exports[`Router Tests Suite > CONFIG BASED - Nested Route Level 4 1`] = `"<h1>1.
 
 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 > DIRECT COMPONENT - Nested Route Level 1 1`] = `"<h1>1. Users START</h1><p>ID: No User Selected</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>1. Users END</p>"`;
+
+exports[`Router Tests Suite > DIRECT COMPONENT - Nested Route Level 1 2`] = `"<h1>1. Users START</h1><p>ID: No User Selected</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>1. Users END</p>"`;
+
+exports[`Router Tests Suite > DIRECT COMPONENT - Nested Route Level 1 Again 1`] = `"<h1>1. Users START</h1><p>ID: No User Selected</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>1. Users END</p>"`;
+
+exports[`Router Tests Suite > DIRECT COMPONENT - Nested Route Level 1 Again 2`] = `"<h1>1. Users START</h1><p>ID: No User Selected</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>1. Users END</p>"`;
+
+exports[`Router Tests Suite > DIRECT COMPONENT - Nested Route Level 2 1`] = `"<h1>1. Users START</h1><p>ID: direct123</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: direct123</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--><span></span><!--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 > DIRECT COMPONENT - Nested Route Level 2 2`] = `"<h1>1. Users START</h1><p>ID: direct333test</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: direct333test</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--><span></span><!--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 > DIRECT COMPONENT - Nested Route Level 3 1`] = `"<h1>1. Users START</h1><p>ID: direct1234</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: direct1234</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: direct1234</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 > DIRECT COMPONENT - Nested Route Level 3 2`] = `"<h1>1. Users START</h1><p>ID: direct953test</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: direct953test</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: direct953test</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 > DIRECT COMPONENT - Nested Route Level 4 1`] = `
+"<h1>1. Users START</h1><p>ID: direct1235</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: direct1235</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: direct1235</p><h1>Data Fetching</h1><p>Loading</p><span></span><!--start map--><!--end map--><!--signal--><!--start map-->function({ router }) {
+  let { $rest } = router.params;
+  return /* @__PURE__ */ __vite_ssr_import_0__.xCreateElement(__vite_ssr_import_0__.xFragment, null, /* @__PURE__ */ __vite_ssr_import_0__.xCreateElement(\\"h1\\", null, \\"4. Users ID Settings Wild Card\\"), /* @__PURE__ */ __vite_ssr_import_0__.xCreateElement(__vite_ssr_import_2__.Page, null), /* @__PURE__ */ __vite_ssr_import_0__.xCreateElement(\\"p\\", null, \\"ID: \\", router.params.id), /* @__PURE__ */ __vite_ssr_import_0__.xCreateElement(\\"p\\", null, $rest), /* @__PURE__ */ __vite_ssr_import_0__.xCreateElement(\\"button\\", { onClick: () => $rest.set(\\"wqer/qwer/qwer\\") }, \\"Test\\"), /* @__PURE__ */ __vite_ssr_import_0__.xCreateElement(__vite_ssr_import_2__.Page, null));
+}<!--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 > DIRECT COMPONENT - Nested Route Level 4 2`] = `"<h1>1. Users START</h1><p>ID: directXXXtest</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: directXXXtest</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: directXXXtest</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: directXXXtest</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>
         .test {
diff --git a/src/router.test.js b/src/router.test.js
index 7949a83..796cc31 100644
--- a/src/router.test.js
+++ b/src/router.test.js
@@ -296,6 +296,86 @@ describe("Router Tests Suite", () => {
     expect(document.title).toBe("Users Test 2");
   });
 
+  it("DIRECT COMPONENT - Nested Route Level 1", async () => {
+    const links = await screen.findAllByRole("link", {
+      name: "DIRECT COMPONENT - Nested Routes /users",
+    });
+    await user.click(links[0]);
+    await delay(200);
+    const testDiv = document.getElementById("nested-routes-test-id");
+    expect(testDiv.innerHTML).toMatchSnapshot();
+
+    router.routeRequest("/users");
+    await delay(200);
+    const testDiv2 = document.getElementById("nested-routes-test-id");
+    expect(testDiv2.innerHTML).toMatchSnapshot();
+    expect(document.title).toBe("Users Test 3");
+  });
+
+  it("DIRECT COMPONENT - Nested Route Level 3", async () => {
+    const links = await screen.findAllByRole("link", {
+      name: "DIRECT COMPONENT - Nested Routes /users/:id/settings",
+    });
+    await user.click(links[0]);
+    await delay(200);
+    const testDiv = document.getElementById("nested-routes-test-id");
+    expect(testDiv.innerHTML).toMatchSnapshot();
+
+    router.routeRequest("/users/direct953test/settings");
+    await delay(200);
+    const testDiv2 = document.getElementById("nested-routes-test-id");
+    expect(testDiv2.innerHTML).toMatchSnapshot();
+    expect(document.title).toBe("Users Settings Test 3");
+  });
+
+  it("DIRECT COMPONENT - Nested Route Level 2", async () => {
+    const links = await screen.findAllByRole("link", {
+      name: "DIRECT COMPONENT - Nested Routes /users/:id",
+    });
+    await user.click(links[0]);
+    await delay(200);
+    const testDiv = document.getElementById("nested-routes-test-id");
+    expect(testDiv.innerHTML).toMatchSnapshot();
+
+    router.routeRequest("/users/direct333test");
+    await delay(200);
+    const testDiv2 = document.getElementById("nested-routes-test-id");
+    expect(testDiv2.innerHTML).toMatchSnapshot();
+    expect(document.title).toBe("Users ID Test 3");
+  });
+
+  it("DIRECT COMPONENT - Nested Route Level 4", async () => {
+    const links = await screen.findAllByRole("link", {
+      name: "DIRECT COMPONENT - Nested Routes /users/:id/settings/all/wild/card/stuff",
+    });
+    await user.click(links[0]);
+    await delay(200);
+    const testDiv = document.getElementById("nested-routes-test-id");
+    expect(testDiv.innerHTML).toMatchSnapshot();
+
+    router.routeRequest("/users/directXXXtest/settings/all/wild/card/stuff");
+    await delay(200);
+    const testDiv2 = document.getElementById("nested-routes-test-id");
+    expect(testDiv2.innerHTML).toMatchSnapshot();
+    expect(document.title).toBe("Users Catch AllTest 3");
+  });
+
+  it("DIRECT COMPONENT - Nested Route Level 1 Again", async () => {
+    const links = await screen.findAllByRole("link", {
+      name: "DIRECT COMPONENT - Nested Routes /users",
+    });
+    await user.click(links[0]);
+    await delay(100);
+    const testDiv = document.getElementById("nested-routes-test-id");
+    expect(testDiv.innerHTML).toMatchSnapshot();
+
+    router.routeRequest("/users");
+    await delay(100);
+    const testDiv2 = document.getElementById("nested-routes-test-id");
+    expect(testDiv2.innerHTML).toMatchSnapshot();
+    expect(document.title).toBe("Users Test 3");
+  });
+
   it("Ambiguous Route/Params Link Works 1", async () => {
     const links = await screen.findAllByRole("link", {
       name: "Ambiguous Route/Params 1",