fix: tanstack router (#25)

* fix: tanstack router

* remove unused import

Author: b-Rogers

eslint.config.js

@@ -10,7 +10,7 @@ export default [
   eslintPluginPrettierRecommended,
   tseslint.configs.eslintRecommended,
   {
-    ignores: ['**/dist', '.prettierrc.js'],
+    ignores: ['**/dist', '.prettierrc.js', '**/routeTree.gen.ts'],
   },
   {
     plugins: {

src/components/App/App.css

@@ -2,7 +2,7 @@
   text-align: center;
 
   .app-header {
-    min-height: 80vh;
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;

src/components/App/index.tsx

@@ -1,5 +1,3 @@
-import { QueryExample } from '../QueryExample';
-
 import './App.css';
 
 export default function App() {
@@ -8,7 +6,6 @@ export default function App() {
       <header className="app-header">
         <h1>Hello World</h1>
       </header>
-      <QueryExample />
     </main>
   );
 }

src/index.tsx

@@ -1,16 +1,25 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import App from './components/App';
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+
+import { routeTree } from './routeTree.gen';
 
-const rootElement = document.getElementById('root');
 const queryClient = new QueryClient();
+const router = createRouter({ routeTree });
 
-if (rootElement) {
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById('root');
+if (rootElement && !rootElement.innerHTML) {
   createRoot(rootElement).render(
     <StrictMode>
       <QueryClientProvider client={queryClient}>
-        <App />
+        <RouterProvider router={router} />
       </QueryClientProvider>
     </StrictMode>
   );

src/routeTree.gen.ts

@@ -13,18 +13,25 @@ import { createFileRoute } from '@tanstack/react-router'
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as IndexImport } from './routes/index'
 
 // Create Virtual Routes
 
-const IndexLazyImport = createFileRoute('/')()
+const QueryLazyImport = createFileRoute('/query')()
 
 // Create/Update Routes
 
-const IndexLazyRoute = IndexLazyImport.update({
+const QueryLazyRoute = QueryLazyImport.update({
+  id: '/query',
+  path: '/query',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/query.lazy').then((d) => d.Route))
+
+const IndexRoute = IndexImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
+} as any)
 
 // Populate the FileRoutesByPath interface
 
@@ -34,7 +41,14 @@ declare module '@tanstack/react-router' {
       id: '/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof IndexLazyImport
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/query': {
+      id: '/query'
+      path: '/query'
+      fullPath: '/query'
+      preLoaderRoute: typeof QueryLazyImport
       parentRoute: typeof rootRoute
     }
   }
@@ -43,33 +57,38 @@ declare module '@tanstack/react-router' {
 // Create and export the route tree
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexLazyRoute
+  '/': typeof IndexRoute
+  '/query': typeof QueryLazyRoute
 }
 
 export interface FileRoutesByTo {
-  '/': typeof IndexLazyRoute
+  '/': typeof IndexRoute
+  '/query': typeof QueryLazyRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
-  '/': typeof IndexLazyRoute
+  '/': typeof IndexRoute
+  '/query': typeof QueryLazyRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/' | '/query'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
+  to: '/' | '/query'
+  id: '__root__' | '/' | '/query'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
-  IndexLazyRoute: typeof IndexLazyRoute
+  IndexRoute: typeof IndexRoute
+  QueryLazyRoute: typeof QueryLazyRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
-  IndexLazyRoute: IndexLazyRoute,
+  IndexRoute: IndexRoute,
+  QueryLazyRoute: QueryLazyRoute,
 }
 
 export const routeTree = rootRoute
@@ -82,11 +101,15 @@ export const routeTree = rootRoute
     "__root__": {
       "filePath": "__root.tsx",
       "children": [
-        "/"
+        "/",
+        "/query"
       ]
     },
     "/": {
-      "filePath": "index.lazy.tsx"
+      "filePath": "index.tsx"
+    },
+    "/query": {
+      "filePath": "query.lazy.tsx"
     }
   }
 }

src/routes/index.lazy.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+import App from '../components/App';
+
+export const Route = createFileRoute('/')({
+  component: App,
+});

src/routes/index.tsx

@@ -0,0 +1,7 @@
+import { createLazyFileRoute } from '@tanstack/react-router';
+
+import { QueryExample } from '../components/QueryExample';
+
+export const Route = createLazyFileRoute('/query')({
+  component: QueryExample,
+});