From 8071ac521fdde693632473f4417095d95578d847 Mon Sep 17 00:00:00 2001 From: Chuka Date: Thu, 1 May 2025 18:56:32 +0100 Subject: [PATCH 1/3] docs: improve core routing concepts documentation --- .../react/routing/routing-concepts.md | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/docs/router/framework/react/routing/routing-concepts.md b/docs/router/framework/react/routing/routing-concepts.md index f07bb658689..a4a035d37da 100644 --- a/docs/router/framework/react/routing/routing-concepts.md +++ b/docs/router/framework/react/routing/routing-concepts.md @@ -318,6 +318,50 @@ The following table shows which component will be rendered based on the URL: - The `posts.$postId.tsx` route is nested as normal under the `posts.tsx` route and will render ``. - The `posts_.$postId.edit.tsx` route **does not share** the same `posts` prefix as the other routes and therefore will be treated as if it is a top-level route and will render ``. +## Excluding Files and Folders from Routes + +Files and folders can be excluded from route generation with a `-` prefix attached to the file name. This gives you the ability to colocate logic in the route directories. + +Consider the following route tree: + +``` +routes/ +├── posts.tsx +├── -posts-table.tsx +├── -components.tsx +│ ├── header.tsx +│ ├── footer.tsx +│ ├── ... +``` + +We can import from the excluded files into our posts route + +```tsx +import { createFileRoute } from '@tanstack/react-router' +import { PostsTable } from './-posts-table' +import { PostsHeader } from './-components/header' +import { PostsFooter } from './-components/footer' + +export const Route = createFileRoute('/posts')({ + loader: () => fetchPosts(), + component: PostComponent, +}) + +function PostComponent() { + const posts = Route.useLoaderData() + + return ( +
+ + + +
+ ) +} +``` + +The excluded files will not be added to `routeTree.gen.ts`. + ## Pathless Route Group Directories Pathless route group directories use `()` as a way to group routes files together regardless of their path. They are purely organizational and do not affect the route tree or component tree in any way. From f84c96d9f30eb26060519320b4ddb0e396700bec Mon Sep 17 00:00:00 2001 From: Sean Cassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Fri, 2 May 2025 10:09:15 +1200 Subject: [PATCH 2/3] Apply suggestions from code review --- docs/router/framework/react/routing/routing-concepts.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/router/framework/react/routing/routing-concepts.md b/docs/router/framework/react/routing/routing-concepts.md index a4a035d37da..211685a934c 100644 --- a/docs/router/framework/react/routing/routing-concepts.md +++ b/docs/router/framework/react/routing/routing-concepts.md @@ -327,10 +327,10 @@ Consider the following route tree: ``` routes/ ├── posts.tsx -├── -posts-table.tsx -├── -components.tsx -│ ├── header.tsx -│ ├── footer.tsx +├── -posts-table.tsx // 👈🏼 ignored +├── -components/ // 👈🏼 ignored +│ ├── header.tsx // 👈🏼 ignored +│ ├── footer.tsx // 👈🏼 ignored │ ├── ... ``` From 2172d44cbd72d2d777e9ad9147c2b52ae12c7f3c Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 1 May 2025 22:11:28 +0000 Subject: [PATCH 3/3] ci: apply automated fixes --- docs/router/framework/react/routing/routing-concepts.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/router/framework/react/routing/routing-concepts.md b/docs/router/framework/react/routing/routing-concepts.md index 211685a934c..38d9ae5cd9b 100644 --- a/docs/router/framework/react/routing/routing-concepts.md +++ b/docs/router/framework/react/routing/routing-concepts.md @@ -349,7 +349,7 @@ export const Route = createFileRoute('/posts')({ function PostComponent() { const posts = Route.useLoaderData() - + return (
@@ -360,7 +360,7 @@ function PostComponent() { } ``` -The excluded files will not be added to `routeTree.gen.ts`. +The excluded files will not be added to `routeTree.gen.ts`. ## Pathless Route Group Directories