chore(examples): fix router for react and solid basic sandboxes (#26)

Author: SeanCassiere

examples/react/basic/src/index.tsx

@@ -1,6 +1,7 @@
 import { createRoot } from 'react-dom/client'
 import Devtools from './setup'
 import { queryPlugin } from './plugin'
+
 setTimeout(() => {
   queryPlugin.emit('test', {
     title: 'Test Event',
@@ -12,10 +13,11 @@ setTimeout(() => {
 queryPlugin.on('test', (event) => {
   console.log('Received test event:', event)
 })
+
 function App() {
   return (
     <div>
-      <h1>TanStack Devtools Basic Example</h1>
+      <h1>TanStack Devtools React Basic Example</h1>
       <Devtools />
     </div>
   )

examples/react/basic/src/setup.tsx

@@ -2,13 +2,13 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import {
-  Outlet,
   Link,
-  createRouter,
-  createRoute,
+  Outlet,
+  RouterProvider,
   createRootRoute,
+  createRoute,
+  createRouter,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { TanstackDevtools } from '@tanstack/react-devtools'
 
 const rootRoute = createRootRoute({
@@ -24,7 +24,6 @@ const rootRoute = createRootRoute({
       </div>
       <hr />
       <Outlet />
-      <TanStackRouterDevtools />
     </>
   ),
 })
@@ -41,7 +40,11 @@ const indexRoute = createRoute({
   },
 })
 function About() {
-  return <div className="p-2">Hello from About!</div>
+  return (
+    <div className="p-2">
+      <h3>Hello from About!</h3>
+    </div>
+  )
 }
 
 const aboutRoute = createRoute({
@@ -72,6 +75,7 @@ export default function DevtoolsExample() {
             },
           ]}
         />
+        <RouterProvider router={router} />
       </QueryClientProvider>
     </>
   )

examples/solid/basic/src/index.tsx

@@ -1,9 +1,10 @@
 import { render } from 'solid-js/web'
 import Devtools from './setup'
+
 function App() {
   return (
     <div>
-      <h1>TanStack Devtools Basic Example</h1>
+      <h1>TanStack Devtools Solid Basic Example</h1>
       <Devtools />
     </div>
   )

examples/solid/basic/src/setup.tsx

@@ -2,20 +2,28 @@ import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
 import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
 import {
+  Link,
   Outlet,
-  createRouter,
-  createRoute,
+  RouterProvider,
   createRootRoute,
+  createRoute,
+  createRouter,
 } from '@tanstack/solid-router'
-import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
 import { TanstackDevtools } from '@tanstack/solid-devtools'
+
 const rootRoute = createRootRoute({
   component: () => (
     <>
-      <div class="p-2 flex gap-2"></div>
+      <div class="p-2 flex gap-2">
+        <Link to="/" class="[&.active]:font-bold">
+          Home
+        </Link>{' '}
+        <Link to="/about" class="[&.active]:font-bold">
+          About
+        </Link>
+      </div>
       <hr />
       <Outlet />
-      <TanStackRouterDevtools />
     </>
   ),
 })
@@ -32,8 +40,13 @@ const indexRoute = createRoute({
   },
 })
 function About() {
-  return <div class="p-2">Hello from About!</div>
+  return (
+    <div class="p-2">
+      <h3>Hello from About!</h3>
+    </div>
+  )
 }
+
 const aboutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/about',
@@ -65,6 +78,7 @@ export default function DevtoolsExample() {
           },
         ]}
       />
+      <RouterProvider router={router} />
     </>
   )
 }