Explicitly annotated type of router in main.tsx. Added recipe edit route.

src/main.tsx

@@ -1,6 +1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
-import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { Router, RouterProvider, createRouter } from '@tanstack/react-router'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { AuthProvider, useAuth } from './auth'
@@ -12,8 +12,8 @@ import { routeTree } from './routeTree.gen'
 library.add(fas)
 
 // Create router
-// Must be `any` because TS complains otherwise
-const router: any = createRouter({
+// Type must be explicitly annotated otherwise TS complains
+const router: Router<typeof routeTree, 'preserve'> = createRouter({
     context: {
         auth: undefined!
     },

src/routeTree.gen.ts

@@ -16,6 +16,7 @@ import { Route as LoginImport } from './routes/login'
 import { Route as AuthImport } from './routes/_auth'
 import { Route as AuthIndexImport } from './routes/_auth/index'
 import { Route as RecipesUsernameSlugImport } from './routes/recipes_/$username.$slug'
+import { Route as RecipesUsernameSlugEditImport } from './routes/recipes_/$username.$slug_/edit'
 
 // Create/Update Routes
 
@@ -44,6 +45,11 @@ const RecipesUsernameSlugRoute = RecipesUsernameSlugImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const RecipesUsernameSlugEditRoute = RecipesUsernameSlugEditImport.update({
+  path: '/recipes/$username/$slug/edit',
+  getParentRoute: () => rootRoute,
+} as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -83,6 +89,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof RecipesUsernameSlugImport
       parentRoute: typeof rootRoute
     }
+    '/recipes/$username/$slug/edit': {
+      id: '/recipes/$username/$slug/edit'
+      path: '/recipes/$username/$slug/edit'
+      fullPath: '/recipes/$username/$slug/edit'
+      preLoaderRoute: typeof RecipesUsernameSlugEditImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
@@ -93,6 +106,7 @@ export const routeTree = rootRoute.addChildren({
   LoginRoute,
   RecipesRoute,
   RecipesUsernameSlugRoute,
+  RecipesUsernameSlugEditRoute,
 })
 
 /* prettier-ignore-end */
@@ -106,7 +120,8 @@ export const routeTree = rootRoute.addChildren({
         "/_auth",
         "/login",
         "/recipes",
-        "/recipes/$username/$slug"
+        "/recipes/$username/$slug",
+        "/recipes/$username/$slug/edit"
       ]
     },
     "/_auth": {
@@ -127,6 +142,9 @@ export const routeTree = rootRoute.addChildren({
     },
     "/recipes/$username/$slug": {
       "filePath": "recipes_/$username.$slug.tsx"
+    },
+    "/recipes/$username/$slug/edit": {
+      "filePath": "recipes_/$username.$slug_/edit.tsx"
     }
   }
 }

src/routes/recipes_/$username.$slug_/edit.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/recipes/$username/$slug/edit')({
+    component: () => <div>Hello /recipes/$username/$slug/edit!</div>
+})