From eaff2e3d57bf0dea1d6234a4d126f1973a3d9276 Mon Sep 17 00:00:00 2001 From: Ben Rogers Date: Tue, 7 Jan 2025 13:01:44 +0000 Subject: [PATCH 1/2] fix: tanstack router --- eslint.config.js | 2 +- src/components/App/App.css | 2 +- src/components/App/index.tsx | 1 - src/index.tsx | 17 +++++++++--- src/routeTree.gen.ts | 51 ++++++++++++++++++++++++++---------- src/routes/index.lazy.tsx | 6 ----- src/routes/index.tsx | 7 +++++ src/routes/query.lazy.tsx | 7 +++++ 8 files changed, 66 insertions(+), 27 deletions(-) delete mode 100644 src/routes/index.lazy.tsx create mode 100644 src/routes/index.tsx create mode 100644 src/routes/query.lazy.tsx diff --git a/eslint.config.js b/eslint.config.js index 5fb1231..546646d 100644 --- a/eslint.config.js +++ b/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: { diff --git a/src/components/App/App.css b/src/components/App/App.css index 942781d..f87b86b 100644 --- a/src/components/App/App.css +++ b/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; diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 0cc663e..3df8a66 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -8,7 +8,6 @@ export default function App() {

Hello World

- ); } diff --git a/src/index.tsx b/src/index.tsx index bec3b31..faf2ddf 100644 --- a/src/index.tsx +++ b/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( - + ); diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index 9015bfa..548473a 100644 --- a/src/routeTree.gen.ts +++ b/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" } } } diff --git a/src/routes/index.lazy.tsx b/src/routes/index.lazy.tsx deleted file mode 100644 index b597799..0000000 --- a/src/routes/index.lazy.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { createLazyFileRoute } from '@tanstack/react-router'; -import App from '../components/App'; - -export const Route = createLazyFileRoute('/')({ - component: App, -}); diff --git a/src/routes/index.tsx b/src/routes/index.tsx new file mode 100644 index 0000000..9270721 --- /dev/null +++ b/src/routes/index.tsx @@ -0,0 +1,7 @@ +import { createFileRoute } from '@tanstack/react-router'; + +import App from '../components/App'; + +export const Route = createFileRoute('/')({ + component: App, +}); diff --git a/src/routes/query.lazy.tsx b/src/routes/query.lazy.tsx new file mode 100644 index 0000000..ddd61db --- /dev/null +++ b/src/routes/query.lazy.tsx @@ -0,0 +1,7 @@ +import { createLazyFileRoute } from '@tanstack/react-router'; + +import { QueryExample } from '../components/QueryExample'; + +export const Route = createLazyFileRoute('/query')({ + component: QueryExample, +}); From 28897abe7f29b7d24b6f23525cb5631734f8067a Mon Sep 17 00:00:00 2001 From: Ben Rogers Date: Tue, 7 Jan 2025 13:04:34 +0000 Subject: [PATCH 2/2] remove unused import --- src/components/App/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 3df8a66..267af06 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -1,5 +1,3 @@ -import { QueryExample } from '../QueryExample'; - import './App.css'; export default function App() {