Repository: TanStack/router
Pull request #2875 (2024-11-27 17:17:23)

fix(router-generator): virtual routes for virtual file routes without file need proper variable names

nx-cloud[bot]: # ☁️ Nx Cloud Report

CI is running for commit aecfb08d9a98e908f0e50995c6e2f435e818162f.

[📂 Click to track the progress, see the status, the terminal output, and the build insights.](https://cloud.nx.app/cipes/6747543c2c2cb52391885ffa?utm_source=pull-request&utm_medium=comment)


---

Sent with 💌 from [NxCloud.](https://nx.app?utm_source=pull-request&utm_medium=comment)

Patch:
diff --git a/packages/router-generator/src/filesystem/virtual/getRouteNodes.ts b/packages/router-generator/src/filesystem/virtual/getRouteNodes.ts
index f4bdd3275..c38c00c6b 100644
--- a/packages/router-generator/src/filesystem/virtual/getRouteNodes.ts
+++ b/packages/router-generator/src/filesystem/virtual/getRouteNodes.ts
@@ -122,7 +122,7 @@ export async function getRouteNodesRecursive(
             routeNode = {
               filePath: '',
               fullPath: '',
-              variableName: '',
+              variableName: routePathToVariable(routePath),
               routePath,
               isLayout,
               isVirtual: true,


Test patch:
diff --git a/packages/router-generator/tests/generator.test.ts b/packages/router-generator/tests/generator.test.ts
index 27eb2cfc3..5dad12227 100644
--- a/packages/router-generator/tests/generator.test.ts
+++ b/packages/router-generator/tests/generator.test.ts
@@ -79,6 +79,7 @@ function rewriteConfigByFolderName(folderName: string, config: Config) {
       {
         const virtualRouteConfig = rootRoute('root.tsx', [
           index('index.tsx'),
+          route('$lang', [index('pages.tsx')]),
           layout('layout.tsx', [
             route('/dashboard', 'db/dashboard.tsx', [
               index('db/dashboard-index.tsx'),
diff --git a/packages/router-generator/tests/generator/virtual/routeTree.snapshot.ts b/packages/router-generator/tests/generator/virtual/routeTree.snapshot.ts
index 0c311fd57..ef967d5c2 100644
--- a/packages/router-generator/tests/generator/virtual/routeTree.snapshot.ts
+++ b/packages/router-generator/tests/generator/virtual/routeTree.snapshot.ts
@@ -8,12 +8,15 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
+import { createFileRoute } from '@tanstack/react-router'
+
 // Import Routes
 
 import { Route as rootRoute } from './routes/root'
 import { Route as layoutImport } from './routes/layout'
 import { Route as indexImport } from './routes/index'
 import { Route as dbDashboardImport } from './routes/db/dashboard'
+import { Route as pagesImport } from './routes/pages'
 import { Route as HelloIndexImport } from './routes/subtree/index'
 import { Route as dbDashboardInvoicesImport } from './routes/db/dashboard-invoices'
 import { Route as dbDashboardIndexImport } from './routes/db/dashboard-index'
@@ -22,6 +25,10 @@ import { Route as HelloFooIdImport } from './routes/subtree/foo/$id'
 import { Route as dbInvoiceDetailImport } from './routes/db/invoice-detail'
 import { Route as dbInvoicesIndexImport } from './routes/db/invoices-index'
 
+// Create Virtual Routes
+
+const LangImport = createFileRoute('/$lang')()
+
 // Create/Update Routes
 
 const layoutRoute = layoutImport.update({
@@ -29,6 +36,12 @@ const layoutRoute = layoutImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const LangRoute = LangImport.update({
+  id: '/$lang',
+  path: '/$lang',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const indexRoute = indexImport.update({
   id: '/',
   path: '/',
@@ -41,6 +54,12 @@ const dbDashboardRoute = dbDashboardImport.update({
   getParentRoute: () => layoutRoute,
 } as any)
 
+const pagesRoute = pagesImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => LangRoute,
+} as any)
+
 const HelloIndexRoute = HelloIndexImport.update({
   id: '/hello/',
   path: '/hello/',
@@ -94,6 +113,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof indexImport
       parentRoute: typeof rootRoute
     }
+    '/$lang': {
+      id: '/$lang'
+      path: '/$lang'
+      fullPath: '/$lang'
+      preLoaderRoute: typeof LangImport
+      parentRoute: typeof rootRoute
+    }
     '/_layout': {
       id: '/_layout'
       path: ''
@@ -101,6 +127,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof layoutImport
       parentRoute: typeof rootRoute
     }
+    '/$lang/': {
+      id: '/$lang/'
+      path: '/'
+      fullPath: '/$lang/'
+      preLoaderRoute: typeof pagesImport
+      parentRoute: typeof LangImport
+    }
     '/_layout/dashboard': {
       id: '/_layout/dashboard'
       path: '/dashboard'
@@ -162,6 +195,16 @@ declare module '@tanstack/react-router' {
 
 // Create and export the route tree
 
+interface LangRouteChildren {
+  pagesRoute: typeof pagesRoute
+}
+
+const LangRouteChildren: LangRouteChildren = {
+  pagesRoute: pagesRoute,
+}
+
+const LangRouteWithChildren = LangRoute._addFileChildren(LangRouteChildren)
+
 interface dbDashboardInvoicesRouteChildren {
   dbInvoicesIndexRoute: typeof dbInvoicesIndexRoute
   dbInvoiceDetailRoute: typeof dbInvoiceDetailRoute
@@ -208,7 +251,9 @@ const layoutRouteWithChildren =
 
 export interface FileRoutesByFullPath {
   '/': typeof indexRoute
+  '/$lang': typeof LangRouteWithChildren
   '': typeof layoutRouteWithChildren
+  '/$lang/': typeof pagesRoute
   '/dashboard': typeof dbDashboardRouteWithChildren
   '/dashboard/': typeof dbDashboardIndexRoute
   '/dashboard/invoices': typeof dbDashboardInvoicesRouteWithChildren
@@ -222,6 +267,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof indexRoute
   '': typeof layoutRouteWithChildren
+  '/$lang': typeof pagesRoute
   '/dashboard': typeof dbDashboardIndexRoute
   '/hello': typeof HelloIndexRoute
   '/dashboard/invoices': typeof dbInvoicesIndexRoute
@@ -233,7 +279,9 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof indexRoute
+  '/$lang': typeof LangRouteWithChildren
   '/_layout': typeof layoutRouteWithChildren
+  '/$lang/': typeof pagesRoute
   '/_layout/dashboard': typeof dbDashboardRouteWithChildren
   '/_layout/dashboard/': typeof dbDashboardIndexRoute
   '/_layout/dashboard/invoices': typeof dbDashboardInvoicesRouteWithChildren
@@ -248,7 +296,9 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/$lang'
     | ''
+    | '/$lang/'
     | '/dashboard'
     | '/dashboard/'
     | '/dashboard/invoices'
@@ -261,6 +311,7 @@ export interface FileRouteTypes {
   to:
     | '/'
     | ''
+    | '/$lang'
     | '/dashboard'
     | '/hello'
     | '/dashboard/invoices'
@@ -270,7 +321,9 @@ export interface FileRouteTypes {
   id:
     | '__root__'
     | '/'
+    | '/$lang'
     | '/_layout'
+    | '/$lang/'
     | '/_layout/dashboard'
     | '/_layout/dashboard/'
     | '/_layout/dashboard/invoices'
@@ -284,11 +337,13 @@ export interface FileRouteTypes {
 
 export interface RootRouteChildren {
   indexRoute: typeof indexRoute
+  LangRoute: typeof LangRouteWithChildren
   layoutRoute: typeof layoutRouteWithChildren
 }
 
 const rootRouteChildren: RootRouteChildren = {
   indexRoute: indexRoute,
+  LangRoute: LangRouteWithChildren,
   layoutRoute: layoutRouteWithChildren,
 }
 
@@ -303,12 +358,19 @@ export const routeTree = rootRoute
       "filePath": "root.tsx",
       "children": [
         "/",
+        "/$lang",
         "/_layout"
       ]
     },
     "/": {
       "filePath": "index.tsx"
     },
+    "/$lang": {
+      "filePath": "",
+      "children": [
+        "/$lang/"
+      ]
+    },
     "/_layout": {
       "filePath": "layout.tsx",
       "children": [
@@ -318,6 +380,10 @@ export const routeTree = rootRoute
         "/_layout/hello/foo/"
       ]
     },
+    "/$lang/": {
+      "filePath": "pages.tsx",
+      "parent": "/$lang"
+    },
     "/_layout/dashboard": {
       "filePath": "db/dashboard.tsx",
       "parent": "/_layout",
diff --git a/packages/router-generator/tests/generator/virtual/routes/pages.tsx b/packages/router-generator/tests/generator/virtual/routes/pages.tsx
new file mode 100644
index 000000000..a942c7ce7
--- /dev/null
+++ b/packages/router-generator/tests/generator/virtual/routes/pages.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/$lang/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/$lang/"!</div>
+}