Add subroute to route in same file with file based routing

[wolflu05]

Hello, I'm using tanstack router and really enjoying the typesafty that it provides.

I really love file based routing too, but I'm now trying to define subroutes for a route in the same file (using file based routing) because they are actually all just one LOC rendering a component with parameters.

Currently my setup looks like this:

routes/
  users.lazy.tsx // <--- renders a table with all users (contains an Outlet)
  users.$userId.lazy.tsx // <--- renders a detail drawer through the Outlet showing a specific users details
  books.lazy.tsx
  books.$bookId.lazy.tsx
  movies.lazy.tsx
  movies.$movieId.lazy.tsx
  // ... you got the idea, like 10x more

users.lazy.tsx:

import { Outlet, createLazyFileRoute } from "@tanstack/react-router";

export const Route = createLazyFileRoute("/users")({
  component: Users,
});

function Users() {
  return (
    <>
      <UsersTable />
      <Outlet />
    </>
  );
}

users.$userId.lazy.tsx:

import { Outlet, createLazyFileRoute } from "@tanstack/react-router";

export const Route = createLazyFileRoute("/users/$userId")({
  component: UserDetail,
});

function UserDetail() {
  return <UserDetailDrawer id={Route.useParams().userId} />
}

---

Question

Having the structure from above clutters my the folder. So is it possible to somehow instead have that all in the users.lazy.tsx file like this?

import { Outlet, createLazyFileRoute } from "@tanstack/react-router";

export const Route = createLazyFileRoute("/users")({
  component: Users,
});

function Users() {
  return (
    <>
      <UsersTable />
      <Outlet />
    </>
  );
}

Route.addChildren(createLazyFileRoute("/users/$userId")({
  component: UserDetail,
}));

function UserDetail() {
  return <UserDetailDrawer id={Route.useParams().userId} />
}

Sometimes I not just have one detail drawer route, but instead multiple per route using their own subroute, but this even more clutters the folder.

[SeanCassiere]

Your suggested method wouldn't be possible with TSR's file-based routing, since it relies on each file corresponding to a route's configuration.
To get the kind of workflow you mentioned above, you'd have to fallback on code-based routing.

What I can suggest to clear up your file-explorer a bit is to make use of the route groups feature in file-based routing, and segment your routes by folders.

You can use the route group feature by moving the related routes (or just ones you think are part of a group) into a folder with the name surrounded by parenthesis.

src/routes/
  index.tsx

  (user-routes)/
    users.$userId.tsx
    users.index.tsx

  (movies)/
    ...

Reference: https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#file-naming-conventions

[wolflu05]

Hello, thanks for your quick answer. Ok I understand mixing file-based routing and code-based routing will not. But thanks for suggesting route groups, I'll use them then instead for larger routes.