TanStackT
TanStack7mo ago
10 replies
clean-aquamarine

How to do non-nested routes with virtual file routes?

The documentation teaches how to make non-nested routes using the file/folder names, but there is no instruction to do the same using virtual file routes
I thought that only the children of a route declared in the first parameter were considered nested, but sibling routes with the same path are still considered children
These two work the same:
export const routes = rootRoute("__root.tsx", [
  index("page.tsx"),
  route("about", "about/layout.tsx", [route("me", "about/me/page.tsx")]),
  route("about/you", "about/you/page.tsx"),
]);

export const routes = rootRoute("__root.tsx", [
  index("page.tsx"),
  route("about", "about/layout.tsx", [
    route("me", "about/me/page.tsx"),
    route("you", "about/you/page.tsx")
  ]),
]);
Was this page helpful?