fix(router-generator): handle deep multi-level non-nested paths with experimental non-nested paths

e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz.index.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/non-nested/deep/$baz/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const params = Route.useParams()
+  return (
+    <div>
+      <div data-testid="non-nested-deep-baz-index-heading">
+        Hello deeply nested baz index
+      </div>
+      <div data-testid="non-nested-deep-baz-index-param">
+        {JSON.stringify(params)}
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz.route.tsx

@@ -0,0 +1,16 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/non-nested/deep/$baz')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div>
+      <div data-testid="non-nested-deep-baz-route-heading">
+        Hello non-nested named baz route layout
+      </div>
+      <Outlet />
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.$foo.index.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/non-nested/deep/$baz_/bar/$foo/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const params = Route.useParams()
+  return (
+    <div>
+      <div data-testid="non-nested-deep-baz-bar-foo-index-heading">
+        Hello deeply nested baz/bar/foo index
+      </div>
+      <div data-testid="non-nested-deep-baz-bar-foo-index-param">
+        {JSON.stringify(params)}
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.$foo.route.tsx

@@ -0,0 +1,16 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/non-nested/deep/$baz_/bar/$foo')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div>
+      <div data-testid="non-nested-deep-baz-bar-foo-route-heading">
+        Hello deeply nested named baz/bar/foo route layout
+      </div>
+      <Outlet />
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.$foo_.qux.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/non-nested/deep/$baz_/bar/$foo_/qux')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const params = Route.useParams()
+  return (
+    <div>
+      <div data-testid="non-nested-deep-baz-bar-foo-qux-heading">
+        Hello deeply nested baz/bar/foo/qux
+      </div>
+      <div data-testid="non-nested-deep-baz-bar-foo-qux-param">
+        {JSON.stringify(params)}
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.index.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/non-nested/deep/$baz_/bar/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const params = Route.useParams()
+  return (
+    <div>
+      <div data-testid="non-nested-deep-baz-bar-index-heading">
+        Hello deeply nested baz/bar index
+      </div>
+      <div data-testid="non-nested-deep-baz-bar-index-param">
+        {JSON.stringify(params)}
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.route.tsx

@@ -0,0 +1,16 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/non-nested/deep/$baz_/bar')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div>
+      <div data-testid="non-nested-deep-baz-bar-route-heading">
+        Hello deeply nested baz/bar route layout
+      </div>
+      <Outlet />
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar_.qux.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/non-nested/deep/$baz_/bar_/qux')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const params = Route.useParams()
+  return (
+    <div>
+      <div data-testid="non-nested-deep-baz-bar-qux-heading">
+        Hello deeply nested baz/bar/qux
+      </div>
+      <div data-testid="non-nested-deep-baz-bar-qux-param">
+        {JSON.stringify(params)}
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/non-nested/deep/route.tsx

@@ -0,0 +1,58 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/non-nested/deep')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div>
+      <div data-testid="non-nested-deep-root-route-heading">
+        Hello non-nested deep layout
+      </div>
+      <div>
+        <Link
+          from={Route.fullPath}
+          to="./$baz"
+          params={{ baz: 'baz' }}
+          data-testid="to-deep-baz"
+        >
+          To Baz
+        </Link>
+        <Link
+          from={Route.fullPath}
+          to="./$baz/bar"
+          params={{ baz: 'baz-bar' }}
+          data-testid="to-deep-baz-bar"
+        >
+          To named baz/bar
+        </Link>
+        <Link
+          from={Route.fullPath}
+          to="./$baz/bar/$foo"
+          params={{ baz: 'baz-bar', foo: 'foo' }}
+          data-testid="to-deep-baz-bar-foo"
+        >
+          To named baz/bar/foo
+        </Link>
+        <Link
+          from={Route.fullPath}
+          to="./$baz/bar/$foo/qux"
+          params={{ baz: 'baz-bar-qux', foo: 'foo' }}
+          data-testid="to-deep-baz-bar-foo-qux"
+        >
+          To named baz/bar/foo/qux
+        </Link>
+        <Link
+          from={Route.fullPath}
+          to="./$baz/bar/qux"
+          params={{ baz: 'baz-bar-qux' }}
+          data-testid="to-deep-baz-bar-qux"
+        >
+          To named baz/bar/qux
+        </Link>
+      </div>
+      <Outlet />
+    </div>
+  )
+}

e2e/react-router/basic-file-based/tests/non-nested-paths.spec.ts

@@ -197,3 +197,170 @@ test.describe('Non-nested paths', () => {
     },
   )
 })
+
+test.describe('Deeply nested non-nested paths', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/non-nested/deep')
+    await page.waitForURL('/non-nested/deep')
+  })
+
+  test('It should nest nested paths 1 level deep', async ({ page }) => {
+    const rootRouteHeading = page.getByTestId(
+      `non-nested-deep-root-route-heading`,
+    )
+
+    await expect(rootRouteHeading).toBeVisible()
+
+    const bazLink = page.getByTestId('to-deep-baz')
+    await bazLink.click()
+    await page.waitForURL('/non-nested/deep/baz')
+    const bazRouteHeading = page.getByTestId(
+      'non-nested-deep-baz-route-heading',
+    )
+    const bazIndexHeading = page.getByTestId(
+      'non-nested-deep-baz-index-heading',
+    )
+    const bazIndexParams = page.getByTestId('non-nested-deep-baz-index-param')
+
+    await expect(bazRouteHeading).toBeVisible()
+    await expect(bazIndexHeading).toBeVisible()
+    expect(await bazIndexParams.innerText()).toBe(
+      JSON.stringify({ baz: 'baz' }),
+    )
+  })
+
+  test('It should not nest non-nested paths 1 level deep', async ({ page }) => {
+    const rootRouteHeading = page.getByTestId(
+      `non-nested-deep-root-route-heading`,
+    )
+
+    await expect(rootRouteHeading).toBeVisible()
+    const bazBarLink = page.getByTestId('to-deep-baz-bar')
+
+    await bazBarLink.click()
+    await page.waitForURL('/non-nested/deep/baz-bar/bar')
+    const bazRouteHeading = page.getByTestId(
+      'non-nested-deep-baz-route-heading',
+    )
+    const bazBarRouteHeading = page.getByTestId(
+      'non-nested-deep-baz-bar-route-heading',
+    )
+    const bazBarIndexHeading = page.getByTestId(
+      'non-nested-deep-baz-bar-index-heading',
+    )
+    const bazBarIndexParams = page.getByTestId(
+      'non-nested-deep-baz-bar-index-param',
+    )
+
+    await expect(bazRouteHeading).not.toBeVisible()
+    await expect(bazBarRouteHeading).toBeVisible()
+    await expect(bazBarIndexHeading).toBeVisible()
+    expect(await bazBarIndexParams.innerText()).toBe(
+      JSON.stringify({ baz: 'baz-bar' }),
+    )
+  })
+
+  test('It should not nest non-nested paths 2 levels deep', async ({
+    page,
+  }) => {
+    const rootRouteHeading = page.getByTestId(
+      `non-nested-deep-root-route-heading`,
+    )
+
+    await expect(rootRouteHeading).toBeVisible()
+
+    const bazBarQuxLink = page.getByTestId('to-deep-baz-bar-qux')
+    await bazBarQuxLink.click()
+
+    await page.waitForURL('/non-nested/deep/baz-bar-qux/bar/qux')
+    const bazRouteHeading = page.getByTestId(
+      'non-nested-deep-baz-route-heading',
+    )
+    const bazBarRouteHeading = page.getByTestId(
+      'non-nested-deep-baz-bar-route-heading',
+    )
+    const bazBarQuxHeading = page.getByTestId(
+      'non-nested-deep-baz-bar-qux-heading',
+    )
+    const bazBarQuxParams = page.getByTestId(
+      'non-nested-deep-baz-bar-qux-param',
+    )
+
+    await expect(bazRouteHeading).not.toBeVisible()
+    await expect(bazBarRouteHeading).not.toBeVisible()
+    await expect(bazBarQuxHeading).toBeVisible()
+    await expect(bazBarQuxParams).toBeVisible()
+    expect(await bazBarQuxParams.innerText()).toBe(
+      JSON.stringify({ baz: 'baz-bar-qux' }),
+    )
+  })
+
+  test('It should nest and un-nest non-nested across paths multiple levels deep', async ({
+    page,
+  }) => {
+    const rootRouteHeading = page.getByTestId(
+      `non-nested-deep-root-route-heading`,
+    )
+
+    await expect(rootRouteHeading).toBeVisible()
+
+    const bazBarFooLink = page.getByTestId('to-deep-baz-bar-foo')
+    await bazBarFooLink.click()
+
+    await page.waitForURL('/non-nested/deep/baz-bar/bar/foo')
+
+    const bazRouteHeading = page.getByTestId(
+      'non-nested-deep-baz-route-heading',
+    )
+    const bazBarRouteHeading = page.getByTestId(
+      'non-nested-deep-baz-bar-route-heading',
+    )
+    const bazBarFooRouteHeading = page.getByTestId(
+      'non-nested-deep-baz-bar-foo-route-heading',
+    )
+    const bazBarFooIndexHeading = page.getByTestId(
+      'non-nested-deep-baz-bar-foo-index-heading',
+    )
+    const bazBarFooIndexParams = page.getByTestId(
+      'non-nested-deep-baz-bar-foo-index-param',
+    )
+
+    await expect(bazRouteHeading).not.toBeVisible()
+    await expect(bazBarRouteHeading).toBeVisible()
+    await expect(bazBarFooRouteHeading).toBeVisible()
+    await expect(bazBarFooIndexHeading).toBeVisible()
+    await expect(bazBarFooIndexParams).toBeVisible()
+    expect(await bazBarFooIndexParams.innerText()).toBe(
+      JSON.stringify({ baz: 'baz-bar', foo: 'foo' }),
+    )
+
+    const bazBarFooQuxLink = page.getByTestId('to-deep-baz-bar-foo-qux')
+    await bazBarFooQuxLink.click()
+    await page.waitForURL('/non-nested/deep/baz-bar-qux/bar/foo/qux')
+
+    const bazBarFooQuxHeading = page.getByTestId(
+      'non-nested-deep-baz-bar-foo-qux-heading',
+    )
+    const bazBarFooQuxParams = page.getByTestId(
+      'non-nested-deep-baz-bar-foo-qux-param',
+    )
+
+    await expect(bazRouteHeading).not.toBeVisible()
+    await expect(bazBarRouteHeading).toBeVisible()
+    await expect(bazBarFooRouteHeading).not.toBeVisible()
+    await expect(bazBarFooQuxHeading).toBeVisible()
+    await expect(bazBarFooQuxParams).toBeVisible()
+
+    if (useExperimentalNonNestedRoutes) {
+      expect(await bazBarFooQuxParams.innerText()).toBe(
+        JSON.stringify({ baz: 'baz-bar-qux', foo: 'foo' }),
+      )
+    } else {
+      // this is a bug with named path params and non-nested paths
+      // that is resolved in the new experimental flag
+      expect(await bazBarFooQuxParams.innerText()).toBe(
+        JSON.stringify({ baz: 'baz-bar', foo: 'foo' }),
+      )
+    }
+  })
+})