Skip to content

Conversation

@nlynzaad
Copy link
Contributor

@nlynzaad nlynzaad commented Nov 6, 2025

This resolves #5751

with the experimentalNonNested paths there is a regression when dealing with deep multi-level non-nested paths for example /posts_/$postId_/edit or /posts/$postId/detail_/edit.

This PR resolves this regression and adds unit tests to router-generator to test for this going forward as well as e2e tests in react and solid to ensure changes replicate correctly to route matching.

Summary by CodeRabbit

  • New Features

    • Added support for deeply nested, parameterized routes (multiple nesting levels) across React and Solid router setups.
    • Improved route generation to better preserve original route path semantics and non-nested matching.
  • Tests

    • Added comprehensive e2e and type tests covering deep non-nested paths and new dynamic blog route scenarios, validating multi-level navigation and params.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 6, 2025

Walkthrough

Adds a multi-level "/non-nested/deep" route subtree for React and Solid E2E suites, new route files and tests, generator updates to track and propagate originalRoutePath, and many generated snapshot/type updates to expose the deep and new blog dynamic routes in public typings.

Changes

Cohort / File(s) Summary
React Router E2E: Deep Non-Nested Routes
e2e/react-router/basic-file-based/src/routes/non-nested/deep/route.tsx, e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz.route.tsx, e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz.index.tsx, e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.route.tsx, e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.index.tsx, e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.$foo.route.tsx, e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.$foo.index.tsx, e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.$foo_.qux.tsx, e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar_.qux.tsx
Adds nine new file-based routes and components under /non-nested/deep (layouts, index routes, paramized segments) and exports Route from each file.
Solid Router E2E: Deep Non-Nested Routes
e2e/solid-router/basic-file-based/src/routes/non-nested/deep/route.tsx, e2e/solid-router/basic-file-based/src/routes/non-nested/deep/$baz.route.tsx, e2e/solid-router/basic-file-based/src/routes/non-nested/deep/$baz.index.tsx, e2e/solid-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.route.tsx, e2e/solid-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.index.tsx, e2e/solid-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.$foo.route.tsx, e2e/solid-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.$foo.index.tsx, e2e/solid-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.$foo_.qux.tsx, e2e/solid-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar_.qux.tsx
Mirrors the React deep non-nested route additions for the Solid E2E suite; each file exports a Route and defines components/outlets.
React Router Generated Route Tree
e2e/react-router/basic-file-based/src/routeTree.gen.ts
Generated route tree updated to include /non-nested/deep subtree, new route constants, child wiring, and TanStack React Router module augmentations for the deep routes.
Solid Router Generated Route Tree
e2e/solid-router/basic-file-based/src/routeTree.gen.ts
Generated route tree updated to include /non-nested/deep subtree, new route constants, child wiring, and TanStack Solid Router module augmentations for the deep routes.
E2E Tests: Deep Non-Nested Paths
e2e/react-router/basic-file-based/tests/non-nested-paths.spec.ts, e2e/solid-router/basic-file-based/tests/non-nested-paths.spec.ts
Adds "Deeply nested non-nested paths" test suite that navigates /non-nested/deep and asserts multi-level navigation, headings, params/index content with conditional expectations for experimental non-nested behavior.
Router Generator Core Logic
packages/router-generator/src/filesystem/physical/getRouteNodes.ts
Threads and normalizes originalRoutePath alongside routePath through prefix/suffix/token stripping and includes it in emitted RouteNode objects.
Router Generator Utilities
packages/router-generator/src/utils.ts
Changes hasParentRoute signature to require `originalRoutePathToCheck: string
Router Generator Tests & Snapshots (flat & nested)
packages/router-generator/tests/generator/flat/*, packages/router-generator/tests/generator/nested-verboseFileRoutes-*/routeTree*.snapshot.ts, packages/router-generator/tests/generator/nested-verboseFileRoutes-*/routes/*, packages/router-generator/tests/generator/*/tests.*.ts, ...
Adds/updates many test route files and snapshots to include new dynamic blog routes (/blog/$blogId, /blog/$blogId/edit, /blog/$blogId/$slug, /blog/$blogId/$slug/bar) and expands type-test expectations to include these routes and their trailing-slash variants.

Sequence Diagram(s)

sequenceDiagram
    participant FS as Filesystem Scanner
    participant Gen as Router Generator
    participant Utils as Parent Matcher (hasParentRoute)
    participant Tree as Generated Route Tree

    FS->>Gen: collect route files
    Gen->>Gen: derive routePath and originalRoutePath
    Gen->>Utils: hasParentRoute(routes, node, routePath, originalRoutePath)
    Utils->>Gen: parentRoute (uses originalRoutePath checks for non-nested)
    Gen->>Tree: assemble route nodes into routeTree with originalRoutePath metadata
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Areas requiring extra attention:

  • packages/router-generator/src/filesystem/physical/getRouteNodes.ts — verify originalRoutePath normalization matches routePath logic across all token/suffix cases.
  • packages/router-generator/src/utils.ts — confirm hasParentRoute signature change is used consistently and non-nested comparisons are correct.
  • Generated snapshots / routeTree.* files — spot-check parent/child wiring, module augmentations, and public typings for the new deep/blog routes.
  • E2E tests — ensure assertions align with experimental flag behavior.

Possibly related PRs

Suggested labels

package: react-router, package: solid-router

Suggested reviewers

  • schiller-manuel
  • Sheraff

Poem

🐰 I hopped the routes both deep and wide,

Traced original paths I used to hide.
From baz to bar to foo and qux I prance,
Now params resolve and tests get their chance.
A tiny rabbit cheers this route-tree dance!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title clearly and concisely describes the main fix: handling deep multi-level non-nested paths with experimental non-nested paths in the router-generator.
Linked Issues check ✅ Passed The PR implements all coding requirements from issue #5751: fixes undefined dynamic segment IDs in non-nested routes, adds unit tests for router-generator, and includes e2e tests in React and Solid to verify correct route matching and runtime behavior.
Out of Scope Changes check ✅ Passed All changes directly support the stated objective of fixing deep multi-level non-nested path handling. No unrelated changes detected; additions to test fixtures and e2e tests align with the PR's scope.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch #5751

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 85bf6ee and e9c55a0.

📒 Files selected for processing (2)
  • e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar_.qux.tsx (1 hunks)
  • e2e/solid-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar_.qux.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar_.qux.tsx
  • e2e/solid-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar_.qux.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Test
  • GitHub Check: Preview

Comment @coderabbitai help to get the list of available commands and usage tips.

@nx-cloud
Copy link

nx-cloud bot commented Nov 6, 2025

View your CI Pipeline Execution ↗ for commit e9c55a0

Command Status Duration Result
nx affected --targets=test:eslint,test:unit,tes... ✅ Succeeded 4m 1s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 3s View ↗

☁️ Nx Cloud last updated this comment at 2025-11-06 23:53:13 UTC

@nlynzaad nlynzaad changed the title fix(router-generator): handle deep multi-level non-nested paths with experimental non-nested paths fix(router-generator): experimental non-nested paths fix(router-generator): experimental non-nested paths fix(router-generator): handle deep multi-level non-nested paths with experimental non-nested paths Nov 6, 2025
@pkg-pr-new
Copy link

pkg-pr-new bot commented Nov 6, 2025

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5779

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5779

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5779

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5779

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5779

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5779

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5779

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5779

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5779

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5779

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5779

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5779

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5779

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5779

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5779

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5779

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5779

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5779

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5779

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5779

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5779

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5779

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5779

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@5779

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5779

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5779

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5779

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5779

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5779

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5779

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5779

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5779

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5779

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5779

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5779

commit: e9c55a0

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/router-generator/tests/generator/nested-verboseFileRoutes-true/routes/blog_/$blogId/$slug_/bar.tsx (1)

1-4: Add blank line after import for consistency.

The ESLint warning is valid. Other files in this directory (e.g., edit.tsx) include a blank line after the import statement, maintaining consistency with common style conventions.

Apply this diff:

 import { createFileRoute } from '@tanstack/react-router'
+
 export const Route = createFileRoute('/blog_/$blogId/$slug_/bar')({

@nlynzaad nlynzaad merged commit 23d8ed7 into main Nov 6, 2025
6 checks passed
@nlynzaad nlynzaad deleted the #5751 branch November 6, 2025 23:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dynamic route segment ID is undefined when used together with non-nested routes

2 participants