chore: add devtools to with-tanstack-router example (#1848)

Author: birkskyum

examples/pnpm-lock.yaml

@@ -8,7 +8,8 @@
     "version": "vinxi version"
   },
   "dependencies": {
-    "@tanstack/solid-router": "^1.112.2",
+    "@tanstack/solid-router": "^1.114.1",
+    "@tanstack/solid-router-devtools": "^1.114.1",
     "@tanstack/router-plugin": "^1.112.0",
     "@solidjs/start": "^1.1.2",
     "solid-js": "^1.9.5",

examples/with-tanstack-router/package.json

@@ -0,0 +1,4 @@
+
+import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
+export default TanStackRouterDevtools;
+

examples/with-tanstack-router/src/components/Devtools.tsx

@@ -1,6 +1,11 @@
 import { Link, Outlet, createRootRoute } from "@tanstack/solid-router";
+
+import { clientOnly } from "@solidjs/start";
 import { Suspense } from "solid-js";
 
+
+const Devtools = clientOnly(() => import("../components/Devtools"));
+
 export const Route = createRootRoute({
   component: RootComponent
 });
@@ -12,6 +17,7 @@ function RootComponent() {
       <Link to="/about">About</Link>
       <Suspense>
         <Outlet />
+        <Devtools />
       </Suspense>
     </>
   );