diff --git a/e2e/react-router/escaped-special-strings/src/routeTree.gen.ts b/e2e/react-router/escaped-special-strings/src/routeTree.gen.ts index d17ed94957..b0e04cd8e8 100644 --- a/e2e/react-router/escaped-special-strings/src/routeTree.gen.ts +++ b/e2e/react-router/escaped-special-strings/src/routeTree.gen.ts @@ -9,23 +9,24 @@ // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. import { Route as rootRouteImport } from './routes/__root' -import { Route as IndexRouteImport } from './routes/[index]' -import { Route as RouteRouteImport } from './routes/[route]' -import { Route as LazyRouteImport } from './routes/[lazy]' +import { Route as Char91indexChar93RouteImport } from './routes/[index]' +import { Route as Char91routeChar93RouteImport } from './routes/[route]' +import { Route as Char91lazyChar93RouteImport } from './routes/[lazy]' import { Route as BlogRouteImport } from './routes/blog[_]' import { Route as LayoutRouteImport } from './routes/[_]layout' +import { Route as IndexRouteImport } from './routes/index' -const IndexRoute = IndexRouteImport.update({ +const Char91indexChar93Route = Char91indexChar93RouteImport.update({ id: '/index', path: '/index', getParentRoute: () => rootRouteImport, } as any) -const RouteRoute = RouteRouteImport.update({ +const Char91routeChar93Route = Char91routeChar93RouteImport.update({ id: '/route', path: '/route', getParentRoute: () => rootRouteImport, } as any) -const LazyRoute = LazyRouteImport.update({ +const Char91lazyChar93Route = Char91lazyChar93RouteImport.update({ id: '/lazy', path: '/lazy', getParentRoute: () => rootRouteImport, @@ -40,43 +41,52 @@ const LayoutRoute = LayoutRouteImport.update({ path: '/_layout', getParentRoute: () => rootRouteImport, } as any) +const IndexRoute = IndexRouteImport.update({ + id: '/', + path: '/', + getParentRoute: () => rootRouteImport, +} as any) export interface FileRoutesByFullPath { + '/': typeof IndexRoute '/_layout': typeof LayoutRoute '/blog_': typeof BlogRoute - '/index': typeof IndexRoute - '/lazy': typeof LazyRoute - '/route': typeof RouteRoute + '/index': typeof Char91indexChar93Route + '/lazy': typeof Char91lazyChar93Route + '/route': typeof Char91routeChar93Route } export interface FileRoutesByTo { + '/': typeof IndexRoute '/_layout': typeof LayoutRoute '/blog_': typeof BlogRoute - '/index': typeof IndexRoute - '/lazy': typeof LazyRoute - '/route': typeof RouteRoute + '/index': typeof Char91indexChar93Route + '/lazy': typeof Char91lazyChar93Route + '/route': typeof Char91routeChar93Route } export interface FileRoutesById { __root__: typeof rootRouteImport + '/': typeof IndexRoute '/_layout': typeof LayoutRoute '/blog_': typeof BlogRoute - '/index': typeof IndexRoute - '/lazy': typeof LazyRoute - '/route': typeof RouteRoute + '/index': typeof Char91indexChar93Route + '/lazy': typeof Char91lazyChar93Route + '/route': typeof Char91routeChar93Route } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/_layout' | '/blog_' | '/index' | '/lazy' | '/route' + fullPaths: '/' | '/_layout' | '/blog_' | '/index' | '/lazy' | '/route' fileRoutesByTo: FileRoutesByTo - to: '/_layout' | '/blog_' | '/index' | '/lazy' | '/route' - id: '__root__' | '/_layout' | '/blog_' | '/index' | '/lazy' | '/route' + to: '/' | '/_layout' | '/blog_' | '/index' | '/lazy' | '/route' + id: '__root__' | '/' | '/_layout' | '/blog_' | '/index' | '/lazy' | '/route' fileRoutesById: FileRoutesById } export interface RootRouteChildren { + IndexRoute: typeof IndexRoute LayoutRoute: typeof LayoutRoute BlogRoute: typeof BlogRoute - IndexRoute: typeof IndexRoute - LazyRoute: typeof LazyRoute - RouteRoute: typeof RouteRoute + Char91indexChar93Route: typeof Char91indexChar93Route + Char91lazyChar93Route: typeof Char91lazyChar93Route + Char91routeChar93Route: typeof Char91routeChar93Route } declare module '@tanstack/react-router' { @@ -85,21 +95,21 @@ declare module '@tanstack/react-router' { id: '/index' path: '/index' fullPath: '/index' - preLoaderRoute: typeof IndexRouteImport + preLoaderRoute: typeof Char91indexChar93RouteImport parentRoute: typeof rootRouteImport } '/route': { id: '/route' path: '/route' fullPath: '/route' - preLoaderRoute: typeof RouteRouteImport + preLoaderRoute: typeof Char91routeChar93RouteImport parentRoute: typeof rootRouteImport } '/lazy': { id: '/lazy' path: '/lazy' fullPath: '/lazy' - preLoaderRoute: typeof LazyRouteImport + preLoaderRoute: typeof Char91lazyChar93RouteImport parentRoute: typeof rootRouteImport } '/blog_': { @@ -116,15 +126,23 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof LayoutRouteImport parentRoute: typeof rootRouteImport } + '/': { + id: '/' + path: '/' + fullPath: '/' + preLoaderRoute: typeof IndexRouteImport + parentRoute: typeof rootRouteImport + } } } const rootRouteChildren: RootRouteChildren = { + IndexRoute: IndexRoute, LayoutRoute: LayoutRoute, BlogRoute: BlogRoute, - IndexRoute: IndexRoute, - LazyRoute: LazyRoute, - RouteRoute: RouteRoute, + Char91indexChar93Route: Char91indexChar93Route, + Char91lazyChar93Route: Char91lazyChar93Route, + Char91routeChar93Route: Char91routeChar93Route, } export const routeTree = rootRouteImport ._addFileChildren(rootRouteChildren) diff --git a/e2e/react-router/escaped-special-strings/src/routes/__root.tsx b/e2e/react-router/escaped-special-strings/src/routes/__root.tsx index 148361916c..a3e7356c71 100644 --- a/e2e/react-router/escaped-special-strings/src/routes/__root.tsx +++ b/e2e/react-router/escaped-special-strings/src/routes/__root.tsx @@ -24,6 +24,9 @@ function RootComponent() { borderBottom: '1px solid #ccc', }} > + + / (home) + /index diff --git a/e2e/react-router/escaped-special-strings/src/routes/index.tsx b/e2e/react-router/escaped-special-strings/src/routes/index.tsx new file mode 100644 index 0000000000..df68429b44 --- /dev/null +++ b/e2e/react-router/escaped-special-strings/src/routes/index.tsx @@ -0,0 +1,20 @@ +import { createFileRoute } from '@tanstack/react-router' + +// This is the standard index route for the root path / +// It coexists with [index].tsx which creates a literal /index route +export const Route = createFileRoute('/')({ + component: HomeComponent, +}) + +function HomeComponent() { + return ( +
+

Home Page

+

/

+

+ This is the home/index route at /. It coexists with the escaped [index] + route at /index. +

+
+ ) +} diff --git a/e2e/react-router/escaped-special-strings/tests/escaped-routes.spec.ts b/e2e/react-router/escaped-special-strings/tests/escaped-routes.spec.ts index 447b5c1194..8aa6d91f82 100644 --- a/e2e/react-router/escaped-special-strings/tests/escaped-routes.spec.ts +++ b/e2e/react-router/escaped-special-strings/tests/escaped-routes.spec.ts @@ -1,6 +1,16 @@ import { expect, test } from '@playwright/test' test.describe('Escaped special strings routing', () => { + test('home index route renders at / path', async ({ page }) => { + await page.goto('/') + + await expect(page.getByTestId('page-title')).toContainText('Home Page') + await expect(page.getByTestId('page-path')).toContainText('/') + await expect(page.getByTestId('page-description')).toContainText( + 'home/index route at /', + ) + }) + test('escaped [index] route renders at /index path', async ({ page }) => { await page.goto('/index') @@ -61,6 +71,14 @@ test.describe('Escaped special strings routing', () => { ) }) + test('client-side navigation to home / route', async ({ page }) => { + await page.goto('/index') + await page.getByTestId('link-home').click() + await page.waitForURL('/') + + await expect(page.getByTestId('page-title')).toContainText('Home Page') + }) + test('client-side navigation to escaped /index route', async ({ page }) => { await page.goto('/route') await page.getByTestId('link-index').click() diff --git a/packages/router-generator/src/filesystem/physical/getRouteNodes.ts b/packages/router-generator/src/filesystem/physical/getRouteNodes.ts index eecd53b534..137793b503 100644 --- a/packages/router-generator/src/filesystem/physical/getRouteNodes.ts +++ b/packages/router-generator/src/filesystem/physical/getRouteNodes.ts @@ -446,7 +446,19 @@ export function getRouteMeta( fsRouteType = 'notFoundComponent' } - const variableName = routePathToVariable(routePath) + // Use originalRoutePath for variable name when any segment is fully + // bracket-wrapped (e.g. [index], [route], [_]auth) to avoid collisions + // with their non-escaped counterparts that get special token treatment + const hasFullyEscapedSegment = originalSegments.some( + (seg) => + seg.startsWith('[') && + seg.endsWith(']') && + !seg.slice(1, -1).includes('[') && + !seg.slice(1, -1).includes(']'), + ) + const variableName = routePathToVariable( + hasFullyEscapedSegment ? originalRoutePath : routePath, + ) return { fsRouteType, variableName } } diff --git a/packages/router-generator/tests/generator/escaped-custom-tokens/routeTree.snapshot.ts b/packages/router-generator/tests/generator/escaped-custom-tokens/routeTree.snapshot.ts index a555744dff..e8b7404df9 100644 --- a/packages/router-generator/tests/generator/escaped-custom-tokens/routeTree.snapshot.ts +++ b/packages/router-generator/tests/generator/escaped-custom-tokens/routeTree.snapshot.ts @@ -9,13 +9,13 @@ // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. import { Route as rootRouteImport } from './routes/__root' -import { Route as R1nd3xRouteImport } from './routes/[_1nd3x]' +import { Route as Char91_1nd3xChar93RouteImport } from './routes/[_1nd3x]' import { Route as BlogR0ut3RouteImport } from './routes/blog._r0ut3_' import { Route as R1nd3xRouteImport } from './routes/_1nd3x' -import { Route as Nested1nd3xRouteImport } from './routes/nested.[_1nd3x]' -import { Route as PostsR0ut3RouteImport } from './routes/posts.[_r0ut3_]' +import { Route as NestedChar91_1nd3xChar93RouteImport } from './routes/nested.[_1nd3x]' +import { Route as PostsChar91_r0ut3_Char93RouteImport } from './routes/posts.[_r0ut3_]' -const R1nd3xRoute = R1nd3xRouteImport.update({ +const Char91_1nd3xChar93Route = Char91_1nd3xChar93RouteImport.update({ id: '/_1nd3x', path: '/_1nd3x', getParentRoute: () => rootRouteImport, @@ -30,38 +30,40 @@ const R1nd3xRoute = R1nd3xRouteImport.update({ path: '/', getParentRoute: () => rootRouteImport, } as any) -const Nested1nd3xRoute = Nested1nd3xRouteImport.update({ - id: '/nested/_1nd3x', - path: '/nested/_1nd3x', - getParentRoute: () => rootRouteImport, -} as any) -const PostsR0ut3Route = PostsR0ut3RouteImport.update({ - id: '/posts/_r0ut3_', - path: '/posts/_r0ut3_', - getParentRoute: () => rootRouteImport, -} as any) +const NestedChar91_1nd3xChar93Route = + NestedChar91_1nd3xChar93RouteImport.update({ + id: '/nested/_1nd3x', + path: '/nested/_1nd3x', + getParentRoute: () => rootRouteImport, + } as any) +const PostsChar91_r0ut3_Char93Route = + PostsChar91_r0ut3_Char93RouteImport.update({ + id: '/posts/_r0ut3_', + path: '/posts/_r0ut3_', + getParentRoute: () => rootRouteImport, + } as any) export interface FileRoutesByFullPath { '/': typeof R1nd3xRoute '/blog': typeof BlogR0ut3Route - '/_1nd3x': typeof R1nd3xRoute - '/nested/_1nd3x': typeof Nested1nd3xRoute - '/posts/_r0ut3_': typeof PostsR0ut3Route + '/_1nd3x': typeof Char91_1nd3xChar93Route + '/nested/_1nd3x': typeof NestedChar91_1nd3xChar93Route + '/posts/_r0ut3_': typeof PostsChar91_r0ut3_Char93Route } export interface FileRoutesByTo { '/': typeof R1nd3xRoute '/blog': typeof BlogR0ut3Route - '/_1nd3x': typeof R1nd3xRoute - '/nested/_1nd3x': typeof Nested1nd3xRoute - '/posts/_r0ut3_': typeof PostsR0ut3Route + '/_1nd3x': typeof Char91_1nd3xChar93Route + '/nested/_1nd3x': typeof NestedChar91_1nd3xChar93Route + '/posts/_r0ut3_': typeof PostsChar91_r0ut3_Char93Route } export interface FileRoutesById { __root__: typeof rootRouteImport '/': typeof R1nd3xRoute '/blog': typeof BlogR0ut3Route - '/_1nd3x': typeof R1nd3xRoute - '/nested/_1nd3x': typeof Nested1nd3xRoute - '/posts/_r0ut3_': typeof PostsR0ut3Route + '/_1nd3x': typeof Char91_1nd3xChar93Route + '/nested/_1nd3x': typeof NestedChar91_1nd3xChar93Route + '/posts/_r0ut3_': typeof PostsChar91_r0ut3_Char93Route } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath @@ -80,9 +82,9 @@ export interface FileRouteTypes { export interface RootRouteChildren { R1nd3xRoute: typeof R1nd3xRoute BlogR0ut3Route: typeof BlogR0ut3Route - R1nd3xRoute: typeof R1nd3xRoute - Nested1nd3xRoute: typeof Nested1nd3xRoute - PostsR0ut3Route: typeof PostsR0ut3Route + Char91_1nd3xChar93Route: typeof Char91_1nd3xChar93Route + NestedChar91_1nd3xChar93Route: typeof NestedChar91_1nd3xChar93Route + PostsChar91_r0ut3_Char93Route: typeof PostsChar91_r0ut3_Char93Route } declare module '@tanstack/react-router' { @@ -91,7 +93,7 @@ declare module '@tanstack/react-router' { id: '/_1nd3x' path: '/_1nd3x' fullPath: '/_1nd3x' - preLoaderRoute: typeof R1nd3xRouteImport + preLoaderRoute: typeof Char91_1nd3xChar93RouteImport parentRoute: typeof rootRouteImport } '/blog': { @@ -112,14 +114,14 @@ declare module '@tanstack/react-router' { id: '/nested/_1nd3x' path: '/nested/_1nd3x' fullPath: '/nested/_1nd3x' - preLoaderRoute: typeof Nested1nd3xRouteImport + preLoaderRoute: typeof NestedChar91_1nd3xChar93RouteImport parentRoute: typeof rootRouteImport } '/posts/_r0ut3_': { id: '/posts/_r0ut3_' path: '/posts/_r0ut3_' fullPath: '/posts/_r0ut3_' - preLoaderRoute: typeof PostsR0ut3RouteImport + preLoaderRoute: typeof PostsChar91_r0ut3_Char93RouteImport parentRoute: typeof rootRouteImport } } @@ -128,9 +130,9 @@ declare module '@tanstack/react-router' { const rootRouteChildren: RootRouteChildren = { R1nd3xRoute: R1nd3xRoute, BlogR0ut3Route: BlogR0ut3Route, - R1nd3xRoute: R1nd3xRoute, - Nested1nd3xRoute: Nested1nd3xRoute, - PostsR0ut3Route: PostsR0ut3Route, + Char91_1nd3xChar93Route: Char91_1nd3xChar93Route, + NestedChar91_1nd3xChar93Route: NestedChar91_1nd3xChar93Route, + PostsChar91_r0ut3_Char93Route: PostsChar91_r0ut3_Char93Route, } export const routeTree = rootRouteImport ._addFileChildren(rootRouteChildren) diff --git a/packages/router-generator/tests/generator/escaped-special-strings/routeTree.snapshot.ts b/packages/router-generator/tests/generator/escaped-special-strings/routeTree.snapshot.ts index ac3c416e47..ea71d9c21b 100644 --- a/packages/router-generator/tests/generator/escaped-special-strings/routeTree.snapshot.ts +++ b/packages/router-generator/tests/generator/escaped-special-strings/routeTree.snapshot.ts @@ -9,9 +9,9 @@ // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. import { Route as rootRouteImport } from './routes/__root' -import { Route as IndexRouteImport } from './routes/[index]' -import { Route as RouteRouteImport } from './routes/[route]' -import { Route as LazyRouteImport } from './routes/[lazy]' +import { Route as Char91indexChar93RouteImport } from './routes/[index]' +import { Route as Char91routeChar93RouteImport } from './routes/[route]' +import { Route as Char91lazyChar93RouteImport } from './routes/[lazy]' import { Route as Foo_barRouteImport } from './routes/foo[_]bar' import { Route as BlogRouteImport } from './routes/blog[_]' import { Route as Api_v2_usersRouteImport } from './routes/api[_]v2[_]users' @@ -19,19 +19,19 @@ import { Route as Prefix_middle_suffixRouteImport } from './routes/[_]prefix[_]m import { Route as LayoutRouteImport } from './routes/[_]layout' import { Route as AuthRouteRouteImport } from './routes/[_]auth.route' import { Route as IndexRouteImport } from './routes/index' -import { Route as NestedIndexRouteImport } from './routes/nested.[index]' +import { Route as NestedChar91indexChar93RouteImport } from './routes/nested.[index]' -const IndexRoute = IndexRouteImport.update({ +const Char91indexChar93Route = Char91indexChar93RouteImport.update({ id: '/index', path: '/index', getParentRoute: () => rootRouteImport, } as any) -const RouteRoute = RouteRouteImport.update({ +const Char91routeChar93Route = Char91routeChar93RouteImport.update({ id: '/route', path: '/route', getParentRoute: () => rootRouteImport, } as any) -const LazyRoute = LazyRouteImport.update({ +const Char91lazyChar93Route = Char91lazyChar93RouteImport.update({ id: '/lazy', path: '/lazy', getParentRoute: () => rootRouteImport, @@ -71,7 +71,7 @@ const IndexRoute = IndexRouteImport.update({ path: '/', getParentRoute: () => rootRouteImport, } as any) -const NestedIndexRoute = NestedIndexRouteImport.update({ +const NestedChar91indexChar93Route = NestedChar91indexChar93RouteImport.update({ id: '/nested/index', path: '/nested/index', getParentRoute: () => rootRouteImport, @@ -85,10 +85,10 @@ export interface FileRoutesByFullPath { '/api_v2_users': typeof Api_v2_usersRoute '/blog_': typeof BlogRoute '/foo_bar': typeof Foo_barRoute - '/index': typeof IndexRoute - '/lazy': typeof LazyRoute - '/route': typeof RouteRoute - '/nested/index': typeof NestedIndexRoute + '/index': typeof Char91indexChar93Route + '/lazy': typeof Char91lazyChar93Route + '/route': typeof Char91routeChar93Route + '/nested/index': typeof NestedChar91indexChar93Route } export interface FileRoutesByTo { '/': typeof IndexRoute @@ -98,10 +98,10 @@ export interface FileRoutesByTo { '/api_v2_users': typeof Api_v2_usersRoute '/blog_': typeof BlogRoute '/foo_bar': typeof Foo_barRoute - '/index': typeof IndexRoute - '/lazy': typeof LazyRoute - '/route': typeof RouteRoute - '/nested/index': typeof NestedIndexRoute + '/index': typeof Char91indexChar93Route + '/lazy': typeof Char91lazyChar93Route + '/route': typeof Char91routeChar93Route + '/nested/index': typeof NestedChar91indexChar93Route } export interface FileRoutesById { __root__: typeof rootRouteImport @@ -112,10 +112,10 @@ export interface FileRoutesById { '/api_v2_users': typeof Api_v2_usersRoute '/blog_': typeof BlogRoute '/foo_bar': typeof Foo_barRoute - '/index': typeof IndexRoute - '/lazy': typeof LazyRoute - '/route': typeof RouteRoute - '/nested/index': typeof NestedIndexRoute + '/index': typeof Char91indexChar93Route + '/lazy': typeof Char91lazyChar93Route + '/route': typeof Char91routeChar93Route + '/nested/index': typeof NestedChar91indexChar93Route } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath @@ -167,10 +167,10 @@ export interface RootRouteChildren { Api_v2_usersRoute: typeof Api_v2_usersRoute BlogRoute: typeof BlogRoute Foo_barRoute: typeof Foo_barRoute - IndexRoute: typeof IndexRoute - LazyRoute: typeof LazyRoute - RouteRoute: typeof RouteRoute - NestedIndexRoute: typeof NestedIndexRoute + Char91indexChar93Route: typeof Char91indexChar93Route + Char91lazyChar93Route: typeof Char91lazyChar93Route + Char91routeChar93Route: typeof Char91routeChar93Route + NestedChar91indexChar93Route: typeof NestedChar91indexChar93Route } declare module '@tanstack/react-router' { @@ -179,21 +179,21 @@ declare module '@tanstack/react-router' { id: '/index' path: '/index' fullPath: '/index' - preLoaderRoute: typeof IndexRouteImport + preLoaderRoute: typeof Char91indexChar93RouteImport parentRoute: typeof rootRouteImport } '/route': { id: '/route' path: '/route' fullPath: '/route' - preLoaderRoute: typeof RouteRouteImport + preLoaderRoute: typeof Char91routeChar93RouteImport parentRoute: typeof rootRouteImport } '/lazy': { id: '/lazy' path: '/lazy' fullPath: '/lazy' - preLoaderRoute: typeof LazyRouteImport + preLoaderRoute: typeof Char91lazyChar93RouteImport parentRoute: typeof rootRouteImport } '/foo_bar': { @@ -249,7 +249,7 @@ declare module '@tanstack/react-router' { id: '/nested/index' path: '/nested/index' fullPath: '/nested/index' - preLoaderRoute: typeof NestedIndexRouteImport + preLoaderRoute: typeof NestedChar91indexChar93RouteImport parentRoute: typeof rootRouteImport } } @@ -263,10 +263,10 @@ const rootRouteChildren: RootRouteChildren = { Api_v2_usersRoute: Api_v2_usersRoute, BlogRoute: BlogRoute, Foo_barRoute: Foo_barRoute, - IndexRoute: IndexRoute, - LazyRoute: LazyRoute, - RouteRoute: RouteRoute, - NestedIndexRoute: NestedIndexRoute, + Char91indexChar93Route: Char91indexChar93Route, + Char91lazyChar93Route: Char91lazyChar93Route, + Char91routeChar93Route: Char91routeChar93Route, + NestedChar91indexChar93Route: NestedChar91indexChar93Route, } export const routeTree = rootRouteImport ._addFileChildren(rootRouteChildren)